CSS Transform（上：2D Transform）
前言及Transform 基本介紹
MDN官方文檔介紹：CSS中transform 屬性允許你修改CSS可視化模型的坐標(biāo)空間。通過(guò)transform役拴，可以讓元素進(jìn)行移動(dòng)（translate）盹沈、旋轉(zhuǎn)（rotate）禽拔、縮放（scale）实檀、拉伸（skew）庞呕。本文主要介紹2D transform的基本用法及其屬性的原理。
瀏覽器兼容性
- Internet Explorer 10、Firefox尽超、Opera 支持 transform 屬性
- Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 變換）。
- Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 變換）梧躺。
- Opera 只支持 2D 變換似谁。
屬性
skew
-
transform: skew(ax,ay)元素在X軸和Y軸負(fù)方向以指定的角度拉伸 -
transform: skew(ax)元素在X軸負(fù)方向以指定的角度拉伸 -
transform: skewX(ax)在X軸負(fù)方向以指定的角度拉伸 -
transform: skewY(ay)在Y軸負(fù)方向以指定的角度拉伸
ax為x方向的角度，ay為y方向的角度掠哥，如： transform: skew(20deg, 20deg);transform: skew(2rad, 1.8rad);transform: skew(20deg);-
transform: skew(-20deg)
demo在此
rotate
繞著Transform-origin點(diǎn)順時(shí)針旋轉(zhuǎn)巩踏，中心點(diǎn)初始值為50% 50%
transform: rotate(<angle>)-
transform: rotate('a'turn)角度為'a' * 360°，'a'為小于1的數(shù)续搀。例如transform: rotate(0.5turn)即transform: rotate(180deg)
目前Chrome 38+/ Opera 25+ 塞琼，我們還可以使用calc() 屬性，例如transform: rotate(calc(0.25turn - 30deg))
skew和rotate的異同：
- 接受的參數(shù)單位都是角度,如20deg禁舷，1rad彪杉；
- skew接受兩個(gè)參數(shù)或一個(gè)參數(shù)毅往，rotate的語(yǔ)法是：
transform: rotate(<angle>); - skew會(huì)使元素變形，rotate不會(huì)
translate
-
transform:translate(tx[, ty])在X軸\Y軸平移指定距離派近，用向量[tx, ty]完成2D平移攀唯，若沒(méi)有ty則默認(rèn)為0 -
transform:translateX(tx)沿X軸正方向平移指定距離 -
transform:translateY(ty)沿Y軸正方向平移指定距離
tx\ty的單位可以為px\百分比。
demo在此
scale
-
transform: scale(sx[, sy]);由[sx, sy]描述指定一個(gè)二維縮放操作渴丸。如果sy 未指定侯嘀，默認(rèn)認(rèn)為和sx的值相同。 -
transform: scaleX(sx);使用向量[sx, 1] 完成在X方向上的縮放. -
transform: scaleY(sy);使用向量[1, sy] 完成在Y方向的縮放.
以transform-origin（初始值為50% 50%）為中心點(diǎn)進(jìn)行縮放曙强，向量坐標(biāo)值大于1或小于-1時(shí)残拐，在相應(yīng)方向放大途茫，坐標(biāo)值處于區(qū)間（-1, 1）時(shí)縮小碟嘴，值為1時(shí)不做變化。如果縮放向量的兩個(gè)坐標(biāo)是相等的囊卜，那么X和Y方向的縮放是均等的娜扇，所以元素的形狀被保持。
demo在此
ps: transform: scale(-1)可以實(shí)現(xiàn)180°鏡像對(duì)稱效果
matrix
語(yǔ)法：
transform: matrix(a, c, b, d, tx, ty)a, c, b, d是一個(gè)二維矩陣:
┌ a b ┐
└ c d ┘
tx, ty就是基于X和Y坐標(biāo)重新定位元素栅组。-
用法：設(shè)變換的中心點(diǎn)為（x雀瓢，y）,長(zhǎng)度值tx、ty創(chuàng)建向量[tx,ty]玉掸，a,b,c,d,tx,ty創(chuàng)建矩陣
變換后的中心點(diǎn)坐標(biāo)(x’, y’)
舉個(gè)例子：
transform: matrix(1, 0, 0, 1, 20, 20) 變換后的中心點(diǎn)橫縱坐標(biāo):x' = 1 * 0 + 0 * 0 + 20 = 20, y' = 0 * 0 + 0 * 1 + 20 = 20刃麸，中心點(diǎn)坐標(biāo)(0, 0) → (20, 20)demo
因?yàn)橹行狞c(diǎn)坐標(biāo)初始值為(0, 0)，則變換后的中心點(diǎn)坐標(biāo)為(tx, ty)司浪，相當(dāng)于用向量[tx,ty]進(jìn)行坐標(biāo)變換泊业。
transform:matrix(a, c, b, d, tx, ty)的變換效果等同于transform: translate(tx, ty), abcd的值與變換無(wú)關(guān)。注意translate的參數(shù)需要單位啊易，而matrix的參數(shù)的單位可省略吁伺。
Multiple values 同時(shí)使用多個(gè)屬性
如```
.element{
width: 100px;
height: 200px;
transform: scale(2) skew(-20deg);
}
[demo](http://codepen.io/cruyun/pen/zZwWgP)
[CSS Tricks](https://css-tricks.com/almanac/properties/t/transform/) 提到：It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.
##Matrix與skew、scale租谈、rotate篮奄、translate
**skew與matrix**、
`transform: matrix(1 tan(θy) tan(θx) 1 0 0)`的變換效果等同于`transform: skew( α + θx, β + θy)`
設(shè)元素的原坐標(biāo)為(x, y)割去，進(jìn)行matrix變換：
變換后的橫坐標(biāo)x' = x+y*tan(θx) 窟却，縱坐標(biāo)y' = x*tan(θy)+y
**scale與matrix**
`transform: matrix(sx 0 0 sy 0 0)`的變換效果等同于 `transform: scale(sx, sy)`
設(shè)元素的原坐標(biāo)為(x, y)，進(jìn)行matrix變換：
變換后的元素坐標(biāo)為(sx * x; sy * y)呻逆，即x和y變?yōu)樵瓉?lái)的sx间校、sy倍。
**rotate與matrix**
`transform: matrix(cosα sinα -sinα cosα 0 0)`的變換效果等同于`transform: rotate(α)`
設(shè)元素的原坐標(biāo)為(x, y)页慷，進(jìn)行matrix變換：
變換后的橫縱坐標(biāo)分別為x' = x * cosα - y * sinα, y' = x * sinα + y * cosα
**translate與matrix**
`transform: matrix(1 0 0 1 tx ty)`的變換效果等同于`transform: translate(tx, ty)`,上文已證憔足。