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平移，若沒有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)`,上文已證。