理解CSS3之`transform`

同步更新在個人 github 上。歡迎指正，共同窗習與完善。

transform 屬性容許你修改CSS視覺格式模型的座標空間。包括：

• translate (轉換)

• rotate (旋轉)

• scale (縮放)

• skew (傾斜)

在此基礎上, 能夠分別對x和y方向單獨定義。如: translatex()、translatey()，以此類推。

高能預警： transform 只對 block 級元素生效！！！ transform-origin 對應着矩陣的中心點， 全部動做都圍繞於此。

---

• translate (轉換)

<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )

// 3d 下才有
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )

// 說明： `<length-percentage> = <length> | <percentage>`

第一個參數： 表示x軸方向上的移動， 長度單位值， 如 100px。 也能夠是百分比數值，如 50%。
第二個參數(可選)： 表示y軸方向上的移動， 長度單位值， 如 100px。 也能夠是百分比數值，如 50%。

Attention: 負方向上的translate使用負值，如 -100px; 百分比值是相對盒子自己的寬度(對應x)與高度(對應y)。

• rotate (旋轉)

<rotate()> = rotate( <angle> )

// 3d 下才有
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )

參數: 角度值， 如 30deg 。

• scale (縮放)

<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )

// 3d 下才有
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )

第一個參數： 表示x軸方向上的縮放， 縮放倍數， 如 scale(2, 1) 表示在x軸方向上放大2倍 。
第二個參數(可選)： 表示y軸方向上的縮放， 縮放倍數， 如 scale(1, 2) 表示在x軸方向上放大2倍 。

Attention: 省略第二個參數表示全部方向上同時縮放， 如 scale(2) 在2d 下表示 x 軸和 y 軸同時放大2倍

• skew (傾斜, 拉伸)

<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )

第一個參數： 表示x軸方向上的傾斜， 角度， 如 skew(90deg) 表示在x軸方向上傾斜90度 。
第二個參數(可選)： 表示y軸方向上的傾斜， 角度， 如 skew(0, 90deg) 表示在y軸方向上傾斜90度。

放大招了

若是你明察秋毫的話，會發現對全部實例的解釋都是錯的，或者說不許確的。

深究一下原理，transform 有一個隱藏的 boss 一直沒被發現。沒錯，就是 matrix。

• matrix (矩陣)

transform:  matrix(a, c, b, d, tx, ty)

/* a, b, c, d 建立了變形矩陣
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   tx, ty是變形的值 .  */

關於二維矩陣

/* a, b, c, d 建立了變形矩陣
   ┌       ┐    ┌   ┐     ┌             ┐
   │ a b e │    | x |     │ ax + by + e │
   │ c d f │ *  | y | =   │ cx + dy + f │
   │ 0 0 1 │    | 1 |     │  0 +  0 + 1 │
   └       ┘    └   ┘     └             ┘
   tx, ty是變形的值 .  */

translate、rotate、scale、skew 這些動做都是通過矩陣變換來的。

matrix的幾個參數中， a 和 d 決定了縮放， c 和 b決定了傾斜， tx、ty決定了移動。

具體的解析能夠查看理解CSS3 transform中的Matrix(矩陣)

因此上面的實例應該解釋成這樣:

• translate(100px) x軸右移了100px。老大動了，小弟只能跟着跑(下同)。

• rotate(45deg) 繞着transform-origin(不額外指定的話是正中心)旋轉了45°

• scale(2, 1) x軸長度被拉長了兩倍。

• skew(45deg) x軸順時針傾斜了45°

然而，還有一個問題： skew沒法實現翻轉！！！ skew(-180deg)並不能改變x軸的指向。這一點能夠經過改變matrix中c,b領會。

因此，若是想要實現翻轉能夠經過改變a和d實現

// 左右翻轉
matrix(-1, 0, 0, 1, 0, 0)

// 上下翻轉
matrix(1, 0, 0, -1, 0, 0)

嗯，臥槽，仍是很懵x 。。。我也很無奈啊，我也懵?~~~

參考

• transform

• 理解CSS3 transform中的Matrix(矩陣)