CSS的變形對(duì)應(yīng)的屬性是transform徽职，它的作用是修改元素自身的坐標(biāo)空間枝缔。這個(gè)修改實(shí)際對(duì)應(yīng)了一個(gè)坐標(biāo)系統(tǒng)映射轉(zhuǎn)換的矩陣枣抱。通過變換熔吗，元素可以實(shí)現(xiàn)在二維或三維的空間內(nèi)的平移、旋轉(zhuǎn)和縮放佳晶。
需要注意的是桅狠，雖然是關(guān)于坐標(biāo)系統(tǒng)，但變換改變的只是元素的視覺渲染轿秧，那是在元素的布局計(jì)算后起作用的垂攘，因此在布局層面沒有影響。
一般我們所看到的網(wǎng)頁布局淤刃，遵循的是坐標(biāo)系統(tǒng)的概念，這就是在說吱型，瀏覽器在實(shí)地渲染和顯示一個(gè)網(wǎng)頁之前逸贾，都會(huì)先進(jìn)行布局計(jì)算，得到網(wǎng)頁中所有元素對(duì)應(yīng)的坐標(biāo)位置津滞，一旦元素的坐標(biāo)位置或者尺寸之類的信息發(fā)生了改變铝侵，瀏覽器就會(huì)重新進(jìn)行布局計(jì)算，這個(gè)重新計(jì)算的過程就叫做回流（reflow）.一般情況下触徐，transform不會(huì)引發(fā)回流咪鲜。
transform的值包含了一系列變換函數(shù)（transform function）,下面我們來詳細(xì)介紹下這些函數(shù)，有旋轉(zhuǎn)撞鹉、偏移疟丙、縮放颖侄、傾斜。
transform的語法如下：
transform:none|<transform-function>+享郊；
transform有兩個(gè)值览祖，一個(gè)是none;一個(gè)是transform-function。多個(gè)transform-function之間用空格隔開炊琉。
<body style="transform:rotate(180deg) scale(1.2);">
（一）2D旋轉(zhuǎn)：rotate()
（1）語法
transform:rotate(45deg)展蒂；
單位deg為度的意思，正數(shù)為順時(shí)針旋轉(zhuǎn)苔咪，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)锰悼，語法中的意思是順時(shí)針旋轉(zhuǎn)45°。
（2）實(shí)例
（二）2D偏移：translate
（1）語法
transform：translate(sx,sy);
- sx：向X軸方向偏移的數(shù)值团赏。
- sy：向Y軸方向偏移的數(shù)值箕般。
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);參數(shù)表示移動(dòng)距離，單位px馆里。
- 一個(gè)參數(shù)時(shí)：表示水平方向的移動(dòng)距離隘世；
- 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的移動(dòng)距離，第二個(gè)參數(shù)表示垂直方向的移動(dòng)距離鸠踪。
translate還可以分別寫丙者，translateX()，translateY()营密，分別給水平方向和垂直方向定義偏移距離械媒。
（2）實(shí)例
（三）2D縮放：scale
（1）語法
transform: scale(0.5) 或者 transform: scale(0.5, 2);
參數(shù)表示縮放倍數(shù)；
- 一個(gè)參數(shù)時(shí)：表示水平和垂直同時(shí)縮放該倍率
- 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)指定水平方向的縮放倍率评汰，第二個(gè)參數(shù)指定垂直方向的縮放倍率纷捞。
（2）實(shí)例
scale還可以分別寫，scaleX和scaleY被去，分別定義水平和垂直的縮放比例主儡。
（四）傾斜：skew
（1）語法
transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
參數(shù)表示傾斜角度，單位deg惨缆。
- 一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度糜值；也就是Ｙ軸往Ｘ軸傾斜。
- 兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度坯墨，第二個(gè)參數(shù)表示垂直方向的傾斜角度寂汇。第二個(gè)參數(shù)也就是說Ｘ軸往Ｙ軸傾斜。
skew還可以分開寫捣染，skewX是Y軸往X軸傾斜骄瓣，skewY是X軸往Y軸傾斜。
（2）實(shí)例
關(guān)于哪個(gè)軸向哪個(gè)軸傾斜理解起來比較費(fèi)勁耍攘，多看看這個(gè)實(shí)例中畫出來的虛線的坐標(biāo)軸的情況吧榕栏。
（五）綜合實(shí)例
這個(gè)效果怎么實(shí)現(xiàn)呢畔勤，就用到多個(gè)transform-function了，比如偏移和旋轉(zhuǎn)臼膏。但是這兩個(gè)function書寫的順序必須不能錯(cuò)硼被。transform中的transform-function可以多個(gè)寫，但是書寫的順序會(huì)影響最后的視覺呈現(xiàn)的效果渗磅。
需要意識(shí)到變換函數(shù)的順序嚷硫。這是因?yàn)椋?strong>每一個(gè)變換函數(shù)不僅改變了元素，同時(shí)也會(huì)改變和元素關(guān)聯(lián)的transform坐標(biāo)系始鱼，當(dāng)變換函數(shù)依次執(zhí)行時(shí)仔掸，后一個(gè)變換函數(shù)總是基于前一個(gè)變換后的新transform坐標(biāo)系。
（六）基準(zhǔn)點(diǎn)transform-origin
在使用transform方法進(jìn)行文字或圖像的變形時(shí)医清，是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行的起暮。使用transform-origin屬性，可以改變變形的基準(zhǔn)點(diǎn)会烙。
（1）語法
transform-origin: x-axis y-axis z-axis;
共兩個(gè)參數(shù)负懦，表示相對(duì)左上角原點(diǎn)的距離，單位px柏腻，第一個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)水平方向的距離纸厉，第二個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)垂直方向的距離；
前兩個(gè)參數(shù)除了可以設(shè)置為具體的像素值五嫂，其中第一個(gè)參數(shù)可以指定為left颗品、center、right沃缘，第二個(gè)參數(shù)可以指定為top躯枢、center、bottom槐臀。第三個(gè)參數(shù)只能設(shè)置具體的像素值锄蹂。
| 值 | 描述 | 值寫法 |
|---|---|---|
| x-axis | 定義視圖被置于 X 軸的何處。 | left或center或right或length或% |
| y-axis | 定義視圖被置于 Y 軸的何處水慨。 | top或center或bottom或length或% |
| z-axis | 定義視圖被置于 Z 軸的何處败匹。 | length |
寫法實(shí)例：
div{transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9
-webkit-transform: rotate(45deg); /*Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */}
當(dāng)填一個(gè)值時(shí)，默認(rèn)Y軸的值為50%讥巡，Z軸的值可以忽略不寫。
transform的值包含了一系列變換函數(shù)（transform function）,其中一部分變換函數(shù)會(huì)產(chǎn)生三維變換舔哪，但是只是應(yīng)用transform function是不能得到可用的三維變換效果的欢顷，還需要理解并使用其他和三維變換有關(guān)的CSS屬性。
（七）透視屬性：perspective
正確的三維效果捉蚤，是建立在一定的透視變化的基礎(chǔ)之上的抬驴。所謂透視變化炼七，就是指以人眼看實(shí)際的景物時(shí)會(huì)有的“近大遠(yuǎn)小”的效果。此外布持，還有一個(gè)概念是滅點(diǎn)（vanishing point）豌拙。
當(dāng)景物離自己的位置越遠(yuǎn)時(shí)，就會(huì)越趨于集中到某一個(gè)點(diǎn)上题暖。這個(gè)點(diǎn)就是滅點(diǎn)按傅，它對(duì)于建立三維效果是非常關(guān)鍵的。
現(xiàn)在再來考慮網(wǎng)頁中的三維效果胧卤。請(qǐng)不要認(rèn)為網(wǎng)頁真的可以把元素排列在離屏幕前的你不同距離的位置(￣Д￣lll)唯绍。網(wǎng)頁仍然只會(huì)顯示在你眼前的屏幕上，其中的元素仍然位于同一平面枝誊。但是况芒，元素會(huì)依照自己在虛擬三維空間中的位置，調(diào)整自己的位置和尺寸叶撒，從而創(chuàng)造出正確的三維效果绝骚。這個(gè)從虛擬三維空間轉(zhuǎn)換到平面中的顯示過程，也常稱為投影祠够。
perspective就是控制這個(gè)投影的參數(shù)压汪。它表示的是假想的觀察點(diǎn)到元素的繪制平面（也就是顯示網(wǎng)頁的平面）的距離，瀏覽器會(huì)根據(jù)這個(gè)距離值哪审，以及元素的Z軸坐標(biāo)蛾魄，計(jì)算出用于投影縮放的比例。
下圖中的d對(duì)應(yīng)的就是perspective的值：
這就是透視變化的“近大遠(yuǎn)小”的效果的原理湿滓。因此滴须，要產(chǎn)生三維效果，必須要指定perspective叽奥。這個(gè)參數(shù)有兩種指定方法
（1）語法
.aya{perspective:2000px;}//寫法一
.aya{transform:webkit-perspective(2000px);}//寫法二
2000px數(shù)值扔水，代表人眼到透視物體的距離，值越大朝氓，透視越不明顯魔市，值越小，透視越明顯赵哲。perspective的值必須為正數(shù)（也就是說待德，不包括0）。
這兩種指定方法是很有區(qū)別的枫夺。當(dāng)perspective作為transform
的一個(gè)變換函數(shù)使用時(shí)将宪，也就是第二種寫法時(shí)，透視變化只作用于應(yīng)用了此變換的單一元素。而使用perspective屬性的寫法较坛，也就是第一種寫法時(shí)印蔗，則一般用在需要三維變換的多個(gè)元素的父元素上(這點(diǎn)要注意)，它會(huì)使對(duì)應(yīng)元素的子元素共享同一個(gè)透視變化（包括滅點(diǎn)位置）丑勤。也就是說华嘹，第一種的這個(gè)寫法的CSS要寫在父元素上，但是作用在子元素上法竞。此外耙厚，當(dāng)使用perspective屬性時(shí)，還可以使用perspective-origin屬性修改透視變化中的滅點(diǎn)的位置（默認(rèn)是中心點(diǎn)）爪喘。
（2）實(shí)例
（3）瀏覽器支持
目前主流的瀏覽器都不支持 perspective 屬性颜曾。需要使用瀏覽器私有前綴。Chrome 和 Safari 支持替代的 -webkit-perspective 屬性秉剑。
（八）定義透視變化中的滅點(diǎn)的位置：perspective-origin
（1）語法
perspective-origin: x-axis y-axis;
| 值 | 描述 | 值寫法 |
|---|---|---|
| x-axis | 定義視圖在 X 軸上的位置泛豪。 | left或center或right或length或% |
| y-axis | 定義視圖在 Y 軸上的位置。 | top或center或bottom或length或% |
（2）實(shí)例
其中當(dāng)為元素定義 perspective-origin 屬性時(shí)侦鹏，其子元素會(huì)獲得透視效果诡曙，而不是元素本身。所以要為元素定義perspective-origin屬性時(shí)略水，要在其父元素上定義該屬性价卤。該屬性必須與perspective屬性一同使用，perspective也要定義在父元素上渊涝，而且只影響 3D 轉(zhuǎn)換元素慎璧。另外，不管是perspective還是perspective-origin都要設(shè)置瀏覽器的私有前綴跨释，比如-webkit-perspective胸私；以及-webkit-perspective-origin。
（4）瀏覽器支持
目前主流瀏覽器都不支持 perspective-origin 屬性鳖谈。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 屬性岁疼。
三維變換使用基于二維變換的相同屬性，如果你熟悉了二維變換缆娃，會(huì)發(fā)現(xiàn)3D變形的功能和2D變換的功能相當(dāng)類似捷绒。CSS3中的3D變換主要包括以下幾種功能函數(shù)：
- 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個(gè)功能函數(shù)；
- 3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個(gè)功能函數(shù)贯要；
- 3D旋轉(zhuǎn)：CSS3中的3D旋轉(zhuǎn)主要包括rotateX()暖侨、rotateY()、rotateZ()和rotate3d()四個(gè)功能函數(shù)崇渗；
- 3D矩陣：CSS3中3D變形中和2D變形一樣也有一個(gè)3D矩陣功能函數(shù)matrix3d()它碎。
(九)3D位移：translate3d()
（1）語法
transform:translate3d(tx,ty,tz);
其屬性值取值說明如下：
- tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度函荣；
- ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度；
- tz：代表Z軸位移向量的長(zhǎng)度扳肛，此值不能是一個(gè)百分比值，如果取值為百分比值乘碑，將會(huì)無效挖息。
translate3d可以拆分成三種寫法，分別是translateX()兽肤、translateY()套腹、translateZ()。
（2）實(shí)例
當(dāng)z軸值越大時(shí)资铡，元素也離觀看者更近电禀，從視覺上元素就變得更大；反之其值越小時(shí)笤休，元素也離觀看者更遠(yuǎn)尖飞，從視覺上元素就變得更小。
translateZ()函數(shù)在實(shí)際使用中等同于translate3d(0,0,tz)店雅。僅從視覺效果上看政基，translateZ()和translate3d(0,0,tz)函數(shù)功能非常類似于二維空間的scale()縮放函數(shù)，但實(shí)際上完全不同闹啦。translateZ()和translate3d(0,0,tz)變形是發(fā)生在Z軸上沮明，而不是X軸和Y軸。當(dāng)使用3D變形窍奋，能夠在一Z軸上移動(dòng)一個(gè)元素確實(shí)有很大的好處荐健，比如說在創(chuàng)建一個(gè)3D立方體的盒子之時(shí)。
（十）3D縮放：scale3d()
（1）語法
transform:scale3d(sx,sy,sz);
其取值說明如下：
- sx：橫向縮放比例琳袄；
- sy：縱向縮放比例江场；
- sz：Z軸縮放比例；
scale3d()函數(shù)單獨(dú)使用時(shí)沒有任何效果挚歧，需要配合其他的變形函數(shù)一起使用才會(huì)有效果扛稽。
scale3d可以拆分成三種寫法，分別是scaleX()滑负、scaleY()在张、ScaleZ()。
（2）實(shí)例
那么為什么scaleZ(5);沒效果呢矮慕，因?yàn)檫@要搭配別的3D屬性才能用帮匾。看下面的實(shí)例說明：
（十一）3D旋轉(zhuǎn):rotate3d()
（1）語法
transform:rotate3d(x,y,z,a)
rotate3d()中取值說明：
x：是一個(gè)0到１之間的數(shù)值痴鳄，主要用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值瘟斜；
y：是一個(gè)０到１之間的數(shù)值，主要用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值；
z：是一個(gè)０到１之間的數(shù)值螺句，主要用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值虽惭；
- a：是一個(gè)角度值，主要用來指定元素在3D空間旋轉(zhuǎn)的角度蛇尚，如果其值為正值芽唇，元素順時(shí)針旋轉(zhuǎn)，反之元素逆時(shí)針旋轉(zhuǎn)取劫。
rotate3d可以分別寫成三個(gè)旋轉(zhuǎn)函數(shù)匆笤，功能等同：
- rotateX(a)函數(shù)功能等同于rotate3d(1,0,0,a)
- rotateY(a)函數(shù)功能等同于rotate3d(0,1,0,a)
- rotateZ(a)函數(shù)功能等同于rotate3d(0,0,1,a)
（2）實(shí)例
CSS3 3D變形兼容性
3D變形在實(shí)際使用中同樣需要添加各瀏覽器的私有屬性，并且有個(gè)別屬性在某些主流瀏覽器中并未得到很好的支持：
- IE10+中3D變形部分屬性未得到很好的支持谱邪；
- Firefox10.0至Firefox15.0版本的瀏覽器炮捧，在使用3D變形時(shí)需要添加私有屬性-moz-，但從Firefox16.0+版本開始無需添加瀏覽器私有屬性惦银；
- Chrome12.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-咆课；
- Safari4.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；
- Opera15.0+版本才開始支持3D變形璧函，使用之里需要添加私有屬性-webkit-傀蚌；
- 移動(dòng)設(shè)備中iOS Safari3.2+、Android Browser3.0+蘸吓、Blackberry Browser7.0+善炫、Opera Mobile14.0+、Chrome for Android25.0+都支持3D變形库继，但在使用時(shí)需要添加私有屬性-webkit-箩艺；Firefox for Android19.0+支持3D變形，但無需添加瀏覽器私有屬性宪萄。
（十二）transform-style
該屬性是3D空間一個(gè)重要屬性艺谆，指定嵌套元素如何在3D空間中呈現(xiàn)。他主要有兩個(gè)屬性值：flat和preserve-3d拜英。
（1）語法
transform-style: flat | preserve-3d
其中flat值為默認(rèn)值静汤，表示所有子元素在2D平面呈現(xiàn)。preserve-3d
表示所有子元素在3D空間中呈現(xiàn)居凶。
也就是說虫给，如果對(duì)一個(gè)元素設(shè)置了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進(jìn)行呈現(xiàn)侠碧。沿著X軸或Y軸方向旋轉(zhuǎn)該元素將導(dǎo)致位于正或負(fù)Z軸位置的子元素顯示在該元素的平面上抹估，而不是它的前面或者后面。如果對(duì)一個(gè)元素設(shè)置了transform-style的值為preserve-3d
弄兜，它表示不執(zhí)行平展操作药蜻，他的所有子元素位于3D空間中瓷式。transform-style
屬性需要設(shè)置在父元素中，并且高于任何嵌套的變形元素语泽。
（2）實(shí)例
（十三）定義3D的背面可見與否：backface-visibility
（1）語法
backface-visibility:visible|hidden;
（2）實(shí)例
