CSS里transform變形這個屬性有點學(xué)習(xí)難度，尤其在CSS3里加上了3D效果之后蚂蕴，2維變3維學(xué)習(xí)成本更是成倍提高苛萎。為什么設(shè)計師的眼里飽含著淚水，因為對頁面效果愛的深沉讲弄。本篇就介紹一下transform措左。（擎天柱：Autobot transform!）

transform本質(zhì)上是一系列變形函數(shù)，分別是translate位移避除，scale縮放怎披，rotate旋轉(zhuǎn)胸嘁，skew扭曲，matrix矩陣凉逛。戒驕戒躁性宏，我們一個個講。

• 前置屬性：
• transform-origin
• transform-style
• perspective
• perspective-origin
• backface-visibility
• 2D變形：
• translate
• scale
• rotate
• skew
• matrix
• 3D變形：
• translate3d
• scale3d
• rotate3d
• matrix3d
• 層級影響

前置屬性

transform-origin

用于指定元素變形的中心點状飞。默認中心點就是元素的正中心毫胜，即XYZ軸的50% 50% 0處∥鼙玻可以通過該屬性改變元素在XYZ軸的中心點酵使，正值表示正向位移，負值表示負向位移焙糟。（XYZ軸的正向分別是往右口渔，往下，靠近用戶眼睛穿撮。反之為反向）

表示2維的x-offset/y-offset可以設(shè)px值也可以設(shè)%百分比缺脉，也可設(shè)top / right / bottom / left / center等keyword。表示3維的z-offset只能設(shè)px值混巧，不能設(shè)%百分比枪向，也沒有keyword勤揩。

默認中心點在元素正中心咧党，因此關(guān)鍵字top等價于top center等價于50% 0%（x軸仍舊留在50%處，y軸位移到0%處）陨亡。同理各關(guān)鍵字例如right等價于right center等價于100% 50%傍衡，不多贅述。

一圖勝千言：為圖片設(shè)置不同的中心點后负蠕，看它們旋轉(zhuǎn)蛙埂，扭曲，縮放的效果遮糖。例如圖1表頭的第一行center表示transform-origin: center绣的。第二行rotate(30deg);表示transform: rotate(30deg);。

另外transform-origin指定變形中心點對translate位移沒有影響欲账。translate位移始終相對于元素正中心進行位移屡江，有懷疑精神的可以自己試一下。

其實transform-origin只是一個語法糖而已赛不，你總是可以用translate來代替它惩嘉。每個transform-origin都可以被兩個translate模擬出來（by CSS變形規(guī)范的編輯Aryeh Gregor）。例如：

transform: rotate(30deg);
transform-origin: 200px 300px;

//等價于
transform: translate(200px, 300px) 
           rotate(30deg)
           translate(-200px, -300px); 
transform-origin: 0 0;

transform-style

這個屬性比較簡單只有兩個值flat和preserve-3d踢故。用于指定舞臺為2D或3D文黎，默認值flat表示2D舞臺惹苗，所有子元素2D層面展現(xiàn)。preserve-3d看名字就知道了表示3D舞臺耸峭，所有子元素在3D層面展現(xiàn)桩蓉。注意，在變形元素自身上指定該屬性是沒有用的劳闹，它用于指定舞臺触机，所以要在變形元素的父元素上設(shè)置該屬性。設(shè)定后玷或，所有子元素共享該舞臺儡首。一圖勝千言：

.div1 {
    float: left;
    background-color: red;
    transform: perspective(200px) rotateY(45deg);
}
.div1 img{
    transform: translateZ(16px);
}
.p3d {
    transform-style: preserve-3d;
}
<div class="div1"><img src="head75.png" /></div>
<div class="div1 p3d"><img src="head75.png" /></div>

兩圖唯一的區(qū)別是：右圖的父div上設(shè)了transform-style: preserve-3d;，因此呈現(xiàn)了3d效果偏友。左圖的父div沒有設(shè)transform-style默認是flat蔬胯，因此元素不會在Z軸展開（translateZ(16px)失效），只能呈現(xiàn)2D效果位他。

另外如果同時設(shè)了transform-style: preserve-3d;和overflow: hidden;氛濒，3D效果將失效，等價于transform-style: flat;鹅髓。如果你發(fā)現(xiàn)3D效果沒有像預(yù)想地那樣出現(xiàn)舞竿，可以檢查一下（包括祖先元素）是否有overflow: hidden;，該屬性將flatten everything…

perspective

指定3D的視距窿冯。默認值是none表示無3D效果骗奖，即2D扁平化。上面例子代碼里其實已經(jīng)用到過該屬性了醒串。介紹它之前执桌，先借用rotateX / rotateY / rotateZ來明確一下xyz軸坐標的基本概念。一圖勝千言芜赌，依次是rotateX軸旋轉(zhuǎn)仰挣，rotateY軸旋轉(zhuǎn)，rotateZ軸旋轉(zhuǎn)：

.x {
    transform: perspective(200px) rotateX(60deg);
}
.y {
    transform: perspective(200px) rotateY(60deg);
}
.z {
    transform: perspective(200px) rotateZ(60deg);
}
<img class="x" src="head75.png" />
<img class="y" src="head75.png" />
<img class="z" src="head75.png" />

從圖中也可以看出缠沈，烤羊肉串就是x軸旋轉(zhuǎn)膘壶，鋼管舞就是y軸旋轉(zhuǎn)，彩票轉(zhuǎn)盤就是z軸旋轉(zhuǎn)洲愤。上面z軸只是一個點颓芭，想象一下就能明白，該點其實是一根垂直于屏幕的線禽篱，而perspective視距就是該線從屏幕到用戶眼睛的距離畜伐。

實現(xiàn)3D的關(guān)鍵就是要有perspective視距，如果將上述代碼中perspective(200px)去掉躺率，效果如下：

perspective只能設(shè)px值薪丁，不能設(shè)%百分比。值越小表示用戶眼睛距離屏幕越近馅精，相當于創(chuàng)建一個較大的3D舞臺严嗜。反之，值越大表示用戶眼睛距離屏幕越遠洲敢，相當于創(chuàng)建一個較小的3D舞臺漫玄。這很容易理解，離的越近東西看起來越大压彭，離的越遠東西看起來越小睦优。但具體該怎么設(shè)呢？借用W3C的圖配合translateZ來幫助理解視距壮不。

.divsp {
    display: inline-block;
    border: 1px blue dashed;
    margin-left: 30px;
    perspective: 100px;
}
.z1 {
    transform: translateZ(-75px);
}
.z2 {
    transform: translateZ(0px);
}
.z3 {
    transform: translateZ(25px);
}
.z4 {
    transform: translateZ(101px);
}
<div class="divsp"><img class="z1" src="head75.png" /></div>
<div class="divsp"><img class="z2" src="head75.png" /></div>
<div class="divsp"><img class="z3" src="head75.png" /></div>
<div class="divsp"><img class="z4" src="head75.png" /></div>

4張圖的視距都是100px，表示4張圖的3D舞臺距離你的眼睛100px脆丁。我們從右往左來理解世舰。圖4的translateZ(101px)看到圖片消失了，因為3D舞臺距離你眼睛100px槽卫，而圖片從舞臺往Z軸正向位移101px跟压，圖片到了你腦袋后面自然什么都看不見。如果設(shè)成translateZ(100px)歼培，相當于圖片緊貼著你的眼睛震蒋，所以全屏都是圖片茸塞。圖3的translateZ(25px)，原始圖片為75px查剖，放大后的圖片為100px钾虐。這是道初中數(shù)學(xué)題，你可以畫一個底邊是75px（圖片原始尺寸）笋庄，高是75px（視距100px-Z軸位移25px=75px）的等腰三角形效扫，然后高擴展到100px，底邊將等比例擴大3分之1至100px直砂。圖2的translateZ(0px)表示Z軸沒有位移菌仁，因此仍舊是原始大小。圖4的translateZ(-75px)静暂，同樣是道初中數(shù)學(xué)題掘托，原始圖片為75px，縮小到42.85px籍嘹，再看看上面W3C的圖理解一下闪盔，很容易算出來。

仔細看代碼的可以看出來辱士，上面介紹XYZ軸旋轉(zhuǎn)時是直接在變形元素img上指定的transform: perspective(200px) rotateX(60deg);泪掀。而上面的代碼是給變形元素img的父div指定perspective: 100px;。你可以理解為前一種方式是perspective()函數(shù)颂碘，后一種方式是perspective屬性异赫。兩種指定方式是有區(qū)別的：

1. 前者perspective()函數(shù)指定只針對當前變形元素，需要和transform其他函數(shù)一起使用头岔，僅表示當前變形元素的視距塔拳。
2. 后者perspective屬性指定用于3D舞臺，即3D舞臺的視距峡竣，里面的子元素共享這個視距

perspective-origin

設(shè)置視距的基點靠抑，看W3C的圖就能明白

.td1 { 
    transform-style: preserve-3d;
    perspective: 200px;
    perspective-origin: center;
}

為節(jié)約篇幅费就，只貼出來圖1的3D舞臺的配置诉瓦，其余8圖只需根據(jù)表頭修改perspective-origin即可。根據(jù)上面9宮格圖就比較容易理解perspective-origin視距基點的意思了。默認值50% 50%即center表示眼睛在舞臺正中心睬澡。然后根據(jù)XY軸的位移量固额，或關(guān)鍵字left（等價于x軸0%）等，調(diào)整眼睛看3D舞臺的位置猴贰。

backface-visibility

用于是否可以看見3D舞臺背面对雪，默認值visible表示背面可見，可以設(shè)成hidden讓背面不可見米绕。通常當旋轉(zhuǎn)時瑟捣，如果不希望背面顯示出來，該屬性就很有用栅干，設(shè)成hidden即可迈套。一圖勝千言：

.stage{
    float: left;
    margin: 5px;
    perspective: 200px;
}
.container {
    transform-style: preserve-3d;
}
.image {
    backface-visibility: hidden;
}
.front {
    position: absolute;
    z-index: 1;
}
.back {
    transform: rotateY(180deg);
}
.stage:nth-child(1) .container{ transform: rotateY(0deg); }
.stage:nth-child(2) .container{ transform: rotateY(30deg); }
.stage:nth-child(3) .container{ transform: rotateY(60deg); }
.stage:nth-child(4) .container{ transform: rotateY(90deg); }
.stage:nth-child(5) .container{ transform: rotateY(120deg); }
.stage:nth-child(6) .container{ transform: rotateY(150deg); }
.stage:nth-child(7) .container{ transform: rotateY(180deg); }

<div class="stage"> //為節(jié)約篇幅該DOM請無腦復(fù)制7個
    <div class="container">
        <img class="image front" src="head75.png" />
        <img class="image back" src="bg75.png" />
    </div>
</div>

DOM結(jié)構(gòu)中就能看出，是兩張圖片（一正一反）疊在了一起碱鳞。由于變形元素img設(shè)了backface-visibility: hidden;桑李，當Y軸旋轉(zhuǎn)超過90度時（Y軸旋轉(zhuǎn)正好90度時，正中間圖4為一片空白窿给，就像丁字褲在視線里消失了^_）贵白，正面的圖片將不可見，底下的背面圖片顯示出來了崩泡。如果將img的backface-visibility屬性去掉（默認為visibility）禁荒，效果如下圖。Y軸旋轉(zhuǎn)超過90度時角撞，將顯示正面的圖片的背部（所謂背部對屏幕來說其實就是圖片矩陣的X軸值取反）：

至此5個前置屬性介紹完畢呛伴。它們多用于3D場合，因此常見的3D的HTML結(jié)構(gòu)如下：

<舞臺>        //為舞臺加上perspective
    <容器>     //為容器加上preserve-3d谒所，使容器內(nèi)元素共享同一個3D渲染環(huán)境
        <元素> //為元素加上transform效果
    </容器>
</舞臺>

2D變形

2D變形有translate位移热康，scale縮放，rotate旋轉(zhuǎn)劣领，skew扭曲姐军，matrix矩陣∑视唬基本的內(nèi)容就不細說了庶弃，自行參照w3cschool，這里只介紹一些w3cschool上沒有講的內(nèi)容德澈。

translate位移

translate位移系列中用于2D的有：translate，translateX固惯，translateY

translate位移梆造，類似于position:relative屬性。可設(shè)單值镇辉，也可設(shè)雙值屡穗。正數(shù)表示XY軸正向位移，負數(shù)為反向位移忽肛。設(shè)單值表示只X軸位移村砂，Y軸坐標不變，例如transform: translate(100px);等價于transform: translate(100px,0);屹逛。這點和CSS中其他單值屬性稍有不同础废，不要誤以為單值是X軸和Y軸均位移。當然最好還是用雙值罕模，如果真的和Y軸無關(guān)评腺，也請用translateX(100px)，雖然效果是一樣的淑掌，但代碼可讀性更高蒿讥。同理如果和X軸無關(guān)，可以用transform: translateY(100px);等價于transform: translate(0, 100px);

上面說了效果類似于position:relative屬性抛腕，但和position語義不同芋绸，position用于頁面布局，而translate屬于transform中的一個系列担敌，用于元素變形摔敛。你可能覺得語義不同有什么卵用，效果OK不就行了柄错？就看你用什么標準來衡量效果了舷夺。CSS的神奇之處在于你可以將一個屬性用在完全違背它原意的場景下，拋開代碼可讀性不談售貌，違背原意有時還是會有細微差別的给猾。如結(jié)合動畫效果時，translate能小于1px過渡颂跨，因此動畫效果更為平滑敢伸。但position最小單位就是1px，動畫效果肯定打折扣恒削。另外用translate實現(xiàn)動畫時池颈，可以使用GPU，動畫的FPS更高钓丰，而position顯然無法享受這個優(yōu)勢躯砰。其他如回流和重繪也都有差異。因此如果你在該用translate的地方用了position携丁，今后一些需求變動達不到要求琢歇，你也沒什么立場可抱怨的了。

scale縮放

scale縮放系列中用于2D的有：scale，scaleX李茫，scaleY

scale縮放揭保，同樣可以設(shè)單值和雙值。單值時表示X軸和Y軸等值縮放魄宏。默認值為1秸侣，要縮小請設(shè)0.01～0.99之間的值，要放大請設(shè)超過1的值宠互。例如縮小一倍可以transform: scale(.5);味榛，放大一倍可以transform: scale(2);。效果在最上面介紹transform-origin時圖片里已經(jīng)有了名秀，不多贅述励负。

如果只想X軸縮放，可以用scaleX(.5)相當于scale(.5, 1)匕得。同理只想Y軸縮放继榆，可以用scaleY(.5)相當于scale(1, .5)。

設(shè)雙值可以實現(xiàn)X軸Y軸不等比例縮放汁掠，如transform: scale(.5, 1.5);略吨，原本75*75px的圖片變成了37.5*112.5px大小。如左圖：

rotate旋轉(zhuǎn)

rotate旋轉(zhuǎn)系列中用于2D的有：rotate

rotate旋轉(zhuǎn)鹦倚，比較簡單河质，只能設(shè)單值。正數(shù)表示順時針旋轉(zhuǎn)震叙，負數(shù)表示逆時針旋轉(zhuǎn)掀鹅。如transform: rotate(30deg);，效果在最上面介紹transform-origin時圖片里已經(jīng)有了媒楼，不多贅述乐尊。（注意和上面不同，在2D層面上沒有rotateX / rotateY划址，它倆和rotateZ都是3D旋轉(zhuǎn)）

skew扭曲

skew扭曲系列中用于2D的有：skew科吭，skewX猴鲫，skewY

skew扭曲可以設(shè)單值和雙值对人。單值時表示只X軸扭曲拂共，Y軸不變，如transform: skew(30deg);等價于transform: skew(30deg, 0);宜狐∈聘妫考慮到可讀性抚恒，不推薦用單值，應(yīng)該用transform: skewX(30deg);俭驮。skewY表示只Y軸扭曲回溺，X軸不變。效果在最上面介紹transform-origin時圖片里已經(jīng)有了混萝，不多贅述遗遵。

matrix矩陣

matrix矩陣前面沒有直接接觸，但卻是所有2D變形的本質(zhì)逸嘀，上面所有2D變形效果都可以用matrix矩陣來實現(xiàn)车要。本篇先略過，將它和3D矩陣matrix3d留到下一篇再介紹崭倘。

3D變形

3D變形有translate3d位移翼岁，scale3d縮放，rotate3d旋轉(zhuǎn)司光， matrix3d矩陣琅坡。（注意skew扭曲是沒有3D的）。3D的用法和2D差不多飘庄，只不過多了個Z軸的值而已（這不是廢話么…）袱衷。

translate3d位移

translate3d位移系列中用于3D的有：translate3d，translateZ

translate3d(tx,ty,tz)斋扰，其中tz的Z軸長度只能為px值陵刹，不能為%百分比。translateZ等價于translate3d(0,0,tz)碾盐。Z軸的值越大表示離眼睛越近晃跺，元素就越大，但當值大于perspective視距時元素將消失毫玖，因為眼睛無法看見眼睛背后的東西掀虎，這在上面介紹perspective時已經(jīng)介紹過凌盯，不再贅述。值越小表示離眼睛越遠烹玉，元素就越小驰怎。實際使用中translateZ效果和2D的scale縮放效果非常像，但原理是有區(qū)別的二打，translateZ是Z軸上位移县忌，而scale是XY軸的縮放。還是那句話继效，盡量將屬性用在符合屬性愿意的場合症杏。

scale3d縮放

scale3d縮放系列中用于3D的有：scale3d瑞信，scaleZ

scale3d(sx,sy,sz)，其中sz為Z軸的縮放比例凡简，取值同sx，sy一樣翁逞，在0.01～0.99時元素縮小溉仑，1時大小不變，大于1時元素變大浊竟。scaleZ等價于scale(1,1,sz)。需要注意的是單獨使用scale3d或scaleZ不會有任何效果必怜，需要配合其他屬性在3D舞臺上才能出現(xiàn)效果后频，否則Z軸的縮放比例根本無法定義。

rotate3d旋轉(zhuǎn)

rotate3d旋轉(zhuǎn)系列中用于3D的有：rotate3d膏执，rotateX露久，rotateY，rotateZ

rotate3d(x,y,z,a)這里多了一個參數(shù)a（讀音是阿爾法…）表示3D舞臺上旋轉(zhuǎn)的角度毫痕，而xyz的取值為0～1為各軸的旋轉(zhuǎn)矢量值迟几。rotate3d类腮，rotateX竖伯，rotateY，rotateZ的效果在上面都有展示七婴，不贅述打厘。

matrix3d矩陣

最后matrix3d矩陣是所有3D變形的本質(zhì)贺辰，上面所有3D變形效果都可以用matrix3d矩陣來實現(xiàn)。本篇先略過饲化，將它和上面的2D矩陣matrix留到下一篇再介紹。

層級影響

現(xiàn)在來看看變形對CSS層級的影響硫眨。說起層級巢块，absolute絕對是層級間的高富帥，見一個睡一個姥闭，sorry，是見一個壓一個棚品，sorry廊敌，是見一個覆蓋一個。

//左圖
<img style="position:absolute;" src="bg100.png" />
<img src="head75.png" />
//右圖
<img style="position:absolute;" src="bg100.png" />
<img style="transform:scale(1);" src="head75.png" />

左圖因為第一張img具有absolute疼进，完全無視DOM結(jié)構(gòu)中的順序秧廉，妥妥地覆蓋了第二張img拣帽。右圖給第二張img設(shè)了transform减拭，通常我們會認為scale(1)是廢代碼区丑，但實際從右圖已經(jīng)看出，由于設(shè)立transform可霎，使元素具有了相當于absolute的層級，因此兩張img平級了癣朗，根據(jù)DOM中的順序旺罢，后者覆蓋了前者。

（這里使用的是scale正卧，你可以改成rotate跪解，skew等，效果都一樣惠遏。即層級和transform有關(guān)，但和具體哪個transform函數(shù)無關(guān)）

因為absolute和transform平級抽高，你可以調(diào)整上面兩張img的順序透绩，這樣設(shè)了transform的圖片會被absolute覆蓋。如果你非要讓absolute高人一等碳竟，可以設(shè)z-index:1這樣層級會高于transform，達到覆蓋效果莹桅。

和absolute同系列的relative和fixed也適用上述層級關(guān)系烛亦。如果你頁面上有個fixed廣告標簽懂拾，頁面滾動時被transform元素覆蓋了岖赋，請不要驚訝，試試設(shè)一下z-index瓮孙。

總結(jié)

transform變形的用法介紹到這就差不多了。為縮減篇幅脸甘，文中代碼都省略-ms祈争，-o等前綴，需要瀏覽器全適應(yīng)的請自行加上菩混。下一篇matrix/matrix3d會更深入其本質(zhì)沮峡，看看這些變形函數(shù)究竟是如何變換坐標位置亿柑，顯示出各種效果的。