1. 變形功能的誕生
在以前的變形上，僅僅是視覺(jué)效果上的變形，在底層的坐標(biāo)方格上沒(méi)有發(fā)生改變。自從CSS3誕生后，元素的特效就從二維走向了三維。之前我們通過(guò)浮動(dòng)、margin 這些操作，都是讓元素平移。
在CSS3中，就誕生了這么一個(gè)屬性：transform 。這個(gè)變形功能，不僅可以平移元素，還能旋轉(zhuǎn)、元素翻轉(zhuǎn)或者其他更加強(qiáng)大的自定義特效。
2. 變形 transform
變形只有一個(gè)屬性：transform ，不過(guò)有很多輔助的屬性值用于控制如何變形。對(duì)于變形元素，要注意點(diǎn)，變形的元素有自己的堆疊上下文：經(jīng)過(guò)縮放、平移變形后的元素，在視覺(jué)上雖然比以前大或者比以前小了，但是元素在頁(yè)面上所占用的空間仍然與變形前的大小一致。
transform: <transform-list> | none;
2.1 二維變形
二維變形，就是通過(guò)平移、旋轉(zhuǎn)、放大縮小和扭曲產(chǎn)生的形變，這個(gè)形變只在 x 和 y 軸上發(fā)生改變。
| 值 | 描述 |
|---|---|
| rotate() | 旋轉(zhuǎn) |
| translate() | 平移 |
| scale() | 放大縮小 |
| skew() | 扭曲/斜切 |
2.1.1 旋轉(zhuǎn)
transform: rotate(30deg);
這段代碼表示讓元素以順時(shí)針?lè)较?/strong>旋轉(zhuǎn)30度，正數(shù)為順時(shí)針，負(fù)數(shù)為逆時(shí)針。deg 表示的是旋轉(zhuǎn)的角度。默認(rèn)情況下，是以元素的中心點(diǎn)來(lái)旋轉(zhuǎn)的。
如果旋轉(zhuǎn)的角度設(shè)置大于360度，那旋轉(zhuǎn)函數(shù)就會(huì)對(duì)角度值進(jìn)行取余。例如，旋轉(zhuǎn)1080deg，那 1080%360 等于 0 度，旋轉(zhuǎn)900度，則是 900%360 等于 180度。
剛剛提到，元素默認(rèn)的旋轉(zhuǎn)中心是元素的中心位置，這個(gè)位置可以通過(guò) transform-origin 來(lái)改變
transform-origin: left top;
它的屬性值，可以使用 left、center、right；top、center、bottom來(lái)表示，也可以使用百分比或者具體的長(zhǎng)度單位來(lái)表示。第一個(gè)值表示水平方向，第二個(gè)值表示垂直方向。
2.1.2 平移
transform: translate(50px,100px);
平移的單位為px，用于設(shè)置水平方向和垂直方向的位移。它可以傳遞兩個(gè)參數(shù)，第一個(gè)參數(shù)就是表示水平方向，第二個(gè)參數(shù)就是垂直方向。當(dāng)傳遞一個(gè)參數(shù)時(shí)，它代表水平方向，垂直位移會(huì)設(shè)為0。
transform: translateX(50px);
transform: translateY(100px);
其中，translate的值可以設(shè)置為負(fù)值。水平方向的正方向?yàn)橛?，垂直方向的正方向?yàn)橄隆Ｘ?fù)值就代表反方向平移
2.1.3 縮放
transform: scale(2);
scale 表示縮放，不需要單位，可以為小數(shù)。1 表示百分百的原始大小，在0～1之間表示縮小，大于1表示放大。它同樣存在兩個(gè)值，第一個(gè)表示水平方向，第二個(gè)表示垂直方向。
當(dāng) scale 值為負(fù)數(shù)時(shí)，左右、上下將會(huì)顛倒。
2.1.4 扭曲
transform: skew(15deg);
該屬性代表扭曲或者斜切，單位和旋轉(zhuǎn)一樣，使用 deg 作為扭曲的角度，可以為負(fù)值。由于使用 skew 會(huì)導(dǎo)致圖像和內(nèi)容失真變形，因此在實(shí)際開發(fā)時(shí)很少使用。
2.2 三維變形
三維變形和二維變形一樣，還是使用 transform 屬性。那么怎樣讓瀏覽器知道，這段代碼是以3D的形式去進(jìn)行解讀呢？通常有兩種方法
-
第一種：直接提前告知瀏覽器變形方式
-webkit-transform-style: preserve-3d;這段代碼需要添加給三維變形元素的腹肌，提前告知瀏覽器：我的子元素要3D變身了，然后瀏覽器會(huì)按照三維變形的方式渲染父級(jí)以及父級(jí)內(nèi)部的元素。
-
第二種：直接使用CSS3三維變形語(yǔ)法
transform: translate3D(100px,200px,300px);transform: translateX(100px) translateY(200px) translateZ(300px);在三維變形的屬性中，都可以按照這種三維書寫方式來(lái)寫。除了 skew，因?yàn)樗娜S和二維沒(méi)有任何變化。
思考問(wèn)題
1. 變形的順序會(huì)不會(huì)影響最終的效果？
當(dāng)一個(gè)變形中，并不僅僅存在一個(gè)變形時(shí)（即需要旋轉(zhuǎn)，也需要平移），不同變形的書寫順序可能會(huì)影響最終的效果。
transform: translate(100px) rotateZ(30deg);transform: rotateZ(30deg) translate(100px);
第一段代碼表示的是，先平移，后旋轉(zhuǎn)；第二段則是先旋轉(zhuǎn)后平移?？梢园l(fā)現(xiàn)，在第二段明顯發(fā)生了垂直方向上的位移，這時(shí)因?yàn)槿绻叵刃D(zhuǎn)，元素的X與Y軸的位置發(fā)生改變，接著平移的位置再按照新的x軸方向進(jìn)行位移，這就導(dǎo)致了在頁(yè)面垂直方向上發(fā)生了位移的改變。所以說(shuō)，在寫變形效果時(shí)，需要先考慮好變形的順序，再進(jìn)行代碼的書寫。
2. 對(duì)于 rotate(0deg) 能否簡(jiǎn)寫成 rotate(0)
原則上是可以簡(jiǎn)寫，但是在火狐的部分版本中，無(wú)法正常讀取無(wú)單位的角度值。因此考慮兼容性，盡量不要省略。
