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í)際開(kāi)發(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);在三維變形的屬性中，都可以按照這種三維書(shū)寫(xiě)方式來(lái)寫(xiě)榆纽。除了 skew仰猖，因?yàn)樗娜S和二維沒(méi)有任何變化捏肢。
思考問(wèn)題
1. 變形的順序會(huì)不會(huì)影響最終的效果？
當(dāng)一個(gè)變形中饥侵，并不僅僅存在一個(gè)變形時(shí)（即需要旋轉(zhuǎn)鸵赫，也需要平移），不同變形的書(shū)寫(xiě)順序可能會(huì)影響最終的效果爆捞。
transform: translate(100px) rotateZ(30deg);transform: rotateZ(30deg) translate(100px);
第一段代碼表示的是奉瘤，先平移，后旋轉(zhuǎn)煮甥；第二段則是先旋轉(zhuǎn)后平移盗温。可以發(fā)現(xiàn)成肘，在第二段明顯發(fā)生了垂直方向上的位移卖局，這時(shí)因?yàn)槿绻叵刃D(zhuǎn)，元素的X與Y軸的位置發(fā)生改變双霍，接著平移的位置再按照新的x軸方向進(jìn)行位移砚偶，這就導(dǎo)致了在頁(yè)面垂直方向上發(fā)生了位移的改變。所以說(shuō)洒闸，在寫(xiě)變形效果時(shí)染坯，需要先考慮好變形的順序，再進(jìn)行代碼的書(shū)寫(xiě)丘逸。
2. 對(duì)于 rotate(0deg) 能否簡(jiǎn)寫(xiě)成 rotate(0)
原則上是可以簡(jiǎn)寫(xiě)单鹿，但是在火狐的部分版本中，無(wú)法正常讀取無(wú)單位的角度值深纲。因此考慮兼容性仲锄，盡量不要省略。
