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

transform本質上是一系列變形函數，分別是translate位移，scale縮放，rotate旋轉，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可以設px值也可以設%百分比，也可設top / right / bottom / left / center等keyword。表示3維的z-offset只能設px值，不能設%百分比，也沒有keyword。

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

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

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

其實transform-origin只是一個語法糖而已，你總是可以用translate來代替它。每個transform-origin都可以被兩個translate模擬出來（by CSS變形規范的編輯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層面展現。preserve-3d看名字就知道了表示3D舞臺，所有子元素在3D層面展現。注意，在變形元素自身上指定該屬性是沒有用的，它用于指定舞臺，所以要在變形元素的父元素上設置該屬性。設定后，所有子元素共享該舞臺。一圖勝千言：

.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>

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

另外如果同時設了transform-style: preserve-3d;和overflow: hidden;，3D效果將失效，等價于transform-style: flat;。如果你發現3D效果沒有像預想地那樣出現，可以檢查一下（包括祖先元素）是否有overflow: hidden;，該屬性將flatten everything…

perspective

指定3D的視距。默認值是none表示無3D效果，即2D扁平化。上面例子代碼里其實已經用到過該屬性了。介紹它之前，先借用rotateX / rotateY / rotateZ來明確一下xyz軸坐標的基本概念。一圖勝千言，依次是rotateX軸旋轉，rotateY軸旋轉，rotateZ軸旋轉：

.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軸旋轉，鋼管舞就是y軸旋轉，彩票轉盤就是z軸旋轉。上面z軸只是一個點，想象一下就能明白，該點其實是一根垂直于屏幕的線，而perspective視距就是該線從屏幕到用戶眼睛的距離。

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

perspective只能設px值，不能設%百分比。值越小表示用戶眼睛距離屏幕越近，相當于創建一個較大的3D舞臺。反之，值越大表示用戶眼睛距離屏幕越遠，相當于創建一個較小的3D舞臺。這很容易理解，離的越近東西看起來越大，離的越遠東西看起來越小。但具體該怎么設呢？借用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，圖片到了你腦袋后面自然什么都看不見。如果設成translateZ(100px)，相當于圖片緊貼著你的眼睛，所以全屏都是圖片。圖3的translateZ(25px)，原始圖片為75px，放大后的圖片為100px。這是道初中數學題，你可以畫一個底邊是75px（圖片原始尺寸），高是75px（視距100px-Z軸位移25px=75px）的等腰三角形，然后高擴展到100px，底邊將等比例擴大3分之1至100px。圖2的translateZ(0px)表示Z軸沒有位移，因此仍舊是原始大小。圖4的translateZ(-75px)，同樣是道初中數學題，原始圖片為75px，縮小到42.85px，再看看上面W3C的圖理解一下，很容易算出來。

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

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

perspective-origin

設置視距的基點，看W3C的圖就能明白

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

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

backface-visibility

用于是否可以看見3D舞臺背面，默認值visible表示背面可見，可以設成hidden讓背面不可見。通常當旋轉時，如果不希望背面顯示出來，該屬性就很有用，設成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"> //為節約篇幅該DOM請無腦復制7個
    <div class="container">
        <img class="image front" src="head75.png" />
        <img class="image back" src="bg75.png" />
    </div>
</div>

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

至此5個前置屬性介紹完畢。它們多用于3D場合，因此常見的3D的HTML結構如下：

<舞臺>        //為舞臺加上perspective
    <容器>     //為容器加上preserve-3d，使容器內元素共享同一個3D渲染環境
        <元素> //為元素加上transform效果
    </容器>
</舞臺>

2D變形

2D變形有translate位移，scale縮放，rotate旋轉，skew扭曲，matrix矩陣。基本的內容就不細說了，自行參照w3cschool，這里只介紹一些w3cschool上沒有講的內容。

translate位移

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

translate位移，類似于position:relative屬性。可設單值，也可設雙值。正數表示XY軸正向位移，負數為反向位移。設單值表示只X軸位移，Y軸坐標不變，例如transform: translate(100px);等價于transform: translate(100px,0);。這點和CSS中其他單值屬性稍有不同，不要誤以為單值是X軸和Y軸均位移。當然最好還是用雙值，如果真的和Y軸無關，也請用translateX(100px)，雖然效果是一樣的，但代碼可讀性更高。同理如果和X軸無關，可以用transform: translateY(100px);等價于transform: translate(0, 100px);

上面說了效果類似于position:relative屬性，但和position語義不同，position用于頁面布局，而translate屬于transform中的一個系列，用于元素變形。你可能覺得語義不同有什么卵用，效果OK不就行了？就看你用什么標準來衡量效果了。CSS的神奇之處在于你可以將一個屬性用在完全違背它原意的場景下，拋開代碼可讀性不談，違背原意有時還是會有細微差別的。如結合動畫效果時，translate能小于1px過渡，因此動畫效果更為平滑。但position最小單位就是1px，動畫效果肯定打折扣。另外用translate實現動畫時，可以使用GPU，動畫的FPS更高，而position顯然無法享受這個優勢。其他如回流和重繪也都有差異。因此如果你在該用translate的地方用了position，今后一些需求變動達不到要求，你也沒什么立場可抱怨的了。

scale縮放

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

scale縮放，同樣可以設單值和雙值。單值時表示X軸和Y軸等值縮放。默認值為1，要縮小請設0.01～0.99之間的值，要放大請設超過1的值。例如縮小一倍可以transform: scale(.5);，放大一倍可以transform: scale(2);。效果在最上面介紹transform-origin時圖片里已經有了，不多贅述。

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

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

rotate旋轉

rotate旋轉系列中用于2D的有：rotate

rotate旋轉，比較簡單，只能設單值。正數表示順時針旋轉，負數表示逆時針旋轉。如transform: rotate(30deg);，效果在最上面介紹transform-origin時圖片里已經有了，不多贅述。（注意和上面不同，在2D層面上沒有rotateX / rotateY，它倆和rotateZ都是3D旋轉）

skew扭曲

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

skew扭曲可以設單值和雙值。單值時表示只X軸扭曲，Y軸不變，如transform: skew(30deg);等價于transform: skew(30deg, 0);。考慮到可讀性，不推薦用單值，應該用transform: skewX(30deg);。skewY表示只Y軸扭曲，X軸不變。效果在最上面介紹transform-origin時圖片里已經有了，不多贅述。

matrix矩陣

matrix矩陣前面沒有直接接觸，但卻是所有2D變形的本質，上面所有2D變形效果都可以用matrix矩陣來實現。本篇先略過，將它和3D矩陣matrix3d留到下一篇再介紹。

3D變形

3D變形有translate3d位移，scale3d縮放，rotate3d旋轉， 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時已經介紹過，不再贅述。值越小表示離眼睛越遠，元素就越小。實際使用中translateZ效果和2D的scale縮放效果非常像，但原理是有區別的，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舞臺上才能出現效果，否則Z軸的縮放比例根本無法定義。

rotate3d旋轉

rotate3d旋轉系列中用于3D的有：rotate3d，rotateX，rotateY，rotateZ

rotate3d(x,y,z,a)這里多了一個參數a（讀音是阿爾法…）表示3D舞臺上旋轉的角度，而xyz的取值為0～1為各軸的旋轉矢量值。rotate3d，rotateX，rotateY，rotateZ的效果在上面都有展示，不贅述。

matrix3d矩陣

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

層級影響

現在來看看變形對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結構中的順序，妥妥地覆蓋了第二張img。右圖給第二張img設了transform，通常我們會認為scale(1)是廢代碼，但實際從右圖已經看出，由于設立transform，使元素具有了相當于absolute的層級，因此兩張img平級了，根據DOM中的順序，后者覆蓋了前者。

（這里使用的是scale，你可以改成rotate，skew等，效果都一樣。即層級和transform有關，但和具體哪個transform函數無關）

因為absolute和transform平級，你可以調整上面兩張img的順序，這樣設了transform的圖片會被absolute覆蓋。如果你非要讓absolute高人一等，可以設z-index:1這樣層級會高于transform，達到覆蓋效果。

和absolute同系列的relative和fixed也適用上述層級關系。如果你頁面上有個fixed廣告標簽，頁面滾動時被transform元素覆蓋了，請不要驚訝，試試設一下z-index。

總結

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