CSS門檻低熟菲，無需程序基礎(chǔ)或數(shù)學(xué)邏輯能力看政，也能做出點(diǎn)自我感覺不錯(cuò)的東西。然而抄罕，你自己也應(yīng)該清楚的允蚣，一般你能輕松學(xué)到的東西，別人也可以呆贿。因此嚷兔，如果你想擠進(jìn)那20%的行列，就要學(xué)到一般人學(xué)不到的深度做入，學(xué)到一般人學(xué)不了的東西冒晰。自然，是需要更多額外的努力的竟块。如果每次你都比別人努力一點(diǎn)點(diǎn)壶运，何愁不比他人高出幾等。人年輕的時(shí)候浪秘，貴在堅(jiān)持蒋情！CSS中也是有復(fù)雜的高檔貨，transform中的矩陣matrix就是其中典型一個(gè)耸携。

? Transform 是CSS極為關(guān)鍵且復(fù)雜的一個(gè)屬性棵癣，功能豐富而且強(qiáng)大，能方便解決很多平常難以處理的問題夺衍，但她本身有些學(xué)習(xí)難度狈谊，如果你對頁面效果愛的深沉，也請你對她愛的深沉。

# Transform的值大類

? transform 本質(zhì)上來說是一系列的變形函數(shù)河劝，主要有以下值：

1. none - 不進(jìn)行轉(zhuǎn)換渊抄，常用作覆蓋別的值使用
2. translate(x,y) - 2d位移；translate3d(x,y,z) - 3d位移丧裁； transformX/Y/Z(n) - 單向位移
3. scale(x,y) - 2d縮放； scale3d(x,y,z) - 3d縮放含衔； scaleX/Y(n) - 單向縮放
4. rotate(angle) - 2d旋轉(zhuǎn)煎娇； rotate3d(x,y,z,angle) - 3d旋轉(zhuǎn)；rotateX/Y/Z(angle) - 單向旋轉(zhuǎn)
5. skew(x-angle,y-angle) - 傾斜變換贪染； skewX/Y(angle) - 單向傾斜變換
6. matrix[3d] - 矩陣
7. perspective(n) - 視距（值）
   ?

# Transform的前置屬性

1. transform-origin - 變換原點(diǎn)
2. transform-style - 變換類型
3. perspective - 3d透視視圖的視距（屬性）
4. perspective-origin - 視距的基點(diǎn)
5. backface-visibility - 是否可以看見舞臺(tái)背面

? 看到這里是不是已經(jīng)快頭暈了缓呛？是否開始懷疑你以前知道的是假的 transform ？如果你看到你不熟悉或不會(huì)的杭隙，沒關(guān)系哟绊，好好看，本文會(huì)給你細(xì)細(xì)道來痰憎。
?

# 位移 - transform: translate(x,y)

? trnaslate2d位移系列票髓，主要有：translate(x[,y]), translateX(x), translateY(y), translateZ(z), translate3d(x,y,z)

? translate(x[,y]) 當(dāng)參數(shù)設(shè)置為正數(shù)時(shí)表示正向移動(dòng)，負(fù)數(shù)為反向移動(dòng)铣耘，類似于 position:relative + margin洽沟；這里注意，y值的設(shè)置是可以省略的蜗细，與margin裆操、padding 省略值后表示兩者值一致不同的是，如果省略了y炉媒，則表示y的值為0踪区。例：translate(50px) 同 translate(50px,0) 表示沿x軸向右移動(dòng)50個(gè)像素，y軸不變吊骤。

? 如果要使用 translate(x,y) 缎岗，最好不要省略參數(shù)，如果只需要偏移一個(gè)方向白粉，建議使用 translateX() 或 translateY() 密强；關(guān)于 translate(x,y)，我有一個(gè)很經(jīng)典的案例分享給大家：按鈕實(shí)現(xiàn)上下左右絕對居中(不受文字字號(hào)影響)

<div>
    <font>這里是文案</font>
</div>

div {
  position: relative;
}
font {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

? translate3d位移主要有：translate3d(x,y,z), translateZ(z)

? 先說簡單的蜗元，translateZ(z) 是指在z軸方向上的位移效果或渤，直白點(diǎn)說就是圖像距離看官的距離關(guān)系，距離越近奕扣，圖像就越大薪鹦；舉個(gè)例子如 看遠(yuǎn)處的山比看近處的手指還小。
? 到這里必須要提前提到另一個(gè)屬性：視距 perspective - 表示看官眼睛的位置；當(dāng) translate 值超過視距時(shí)池磁，圖像就消失了奔害，就好比圖像移動(dòng)到看官眼睛后面一樣，這個(gè)大家應(yīng)該都能理解地熄。我們用代碼來說話(省去不相關(guān)屬性)：

<div>
  <p></p>
</div>

div {
  width: 100px;
  height: 100px;
  perspective: 100px; 
}
p {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translateZ(75px);
}

【注意坑】要使用translateZ,必須在父元素上設(shè)置perspective

? 會(huì)了translareZ(z) 之后，translate3d(x,y,z)` 也就簡單了闽晦，無非就是在做Z位移的同時(shí)做了x,y的位移扳碍；把剛才的例子稍作修改后直接上代碼：

transform: translate3d(5px,5px,75px);

1. 如果是動(dòng)畫效果，translate能達(dá)到比1px更小的過渡效果麸祷，而后者卻不行澎怒，這就影響了用戶體驗(yàn)；
2. translate的動(dòng)畫效果能啟用電腦GPU加速阶牍，分離圖層喷面，大大減少頁面重繪模塊，節(jié)省資源走孽。
3. position 的可拓展性不如 translate等惧辈。
   ?

# 縮放 - transform: scale(x,y)

? scale2d縮放系列，主要有：scale(x,y), scaleX(x), scaleY(y)

? scale(x[,y]) 允許省略y磕瓷，當(dāng)省略y時(shí)表示x,y等值縮放盒齿。如果只想縮放x或y軸念逞，可以使用 scaleX(x), scaleY(y) 。既然為縮放边翁，傳遞的參數(shù)肯定為縮放比例翎承，也就是說，約定 1 為大小不變符匾，0.01~0.99 表示縮小叨咖，>1 表示放大。
? 例：scale(0.5) 等同于 scale(0.5, 0.5)啊胶； scaleX(0.5) 等同于 scale(0.5, 1)

? 還有一個(gè)特例甸各，如果我們設(shè)置縮放比例為負(fù)數(shù)會(huì)怎么樣？一起來看一下效果：

transform: scale(-1);

transform: scale(-1.5);

所以說创淡，設(shè)置負(fù)數(shù)，可以使圖像翻轉(zhuǎn)南吮，縮放規(guī)則與正數(shù)一致琳彩。

? scale3d縮放系列，有：scale3d(x,y,z) , scaleZ(z)

? 所謂3d縮放部凑，就是在z軸上也有縮放效果露乏，但只有在z軸上有分內(nèi)容時(shí)才能生效（其實(shí)x,y軸也一樣，只是x,y軸上的直觀容易理解些）

? scale3d的第三個(gè)參數(shù)涂邀，比位移的第三個(gè)參數(shù)可難以理解多了瘟仿。拋開其他因素，我們先來研究scaleZ(z)比勉。因?yàn)樗且粋€(gè)3d變形效果劳较，因此同 translateZ(z) 一致，我們需要為其創(chuàng)建一個(gè)3d環(huán)境浩聋，這里把translateZ一起加進(jìn)來對比討論观蜗。

<div class="perspective">Translated</div>
<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: skyblue;
}
.perspective {
  /* Includes a perspective to create a 3D space */
  transform: perspective(400px) translateZ(-100px);
  background-color: cornsilk;
}
.scaled {
  /* Includes a perspective to create a 3D space */
  transform: perspective(400px) scaleZ(2);
  background-color: pink;
}

.scaled {
  /* Includes a perspective to create a 3D space */
  transform: perspective(100px) scaleZ(1) rotateY(-20deg);
  background-color: pink;
}

<div class="scaled">Scaled</div>
<div class="rotated">rotated</div>

.scaled {
  /* Includes a perspective to create a 3D space */
  transform: perspective(100px) scaleZ(2) rotateY(-20deg);
  background-color: pink;
}

.rotated {
  /* Includes a perspective to create a 3D space */
  transform: perspective(100px) scaleZ(1) rotateY(-40deg);
  background-color: pink;
}

# 旋轉(zhuǎn) - transfrom: rotate(angle)

? rotate2d旋轉(zhuǎn)系列梯找，有： rotate(angle)

【注】與前兩個(gè)不同唆阿，rotateX, rotateY 同 rotateZ都為rotate3d旋轉(zhuǎn)
? 參數(shù) angle 表示旋轉(zhuǎn)角度，單位為 deg 锈锤；當(dāng)角度為正數(shù)時(shí)表示順時(shí)針旋轉(zhuǎn)驯鳖，為負(fù)數(shù)時(shí)表示逆時(shí)針旋轉(zhuǎn)，來看一個(gè)例子：

<div>Nomal</div>
<div class="rotated">Rotated</div>
<div class="rotated2">Rotated2</div>

div {
  display: inline-block;
  width: 80px;
  height: 50px;
}
.rotated {
  transform: rotate(30deg);
}
.rotated2 {
  transform: rotate(-30deg);
}

image.png

? rotate3d旋轉(zhuǎn)系列久免，有：rotateX(angle), rotateY(angle), rotateZ(angle), rotate3d(x, y, z, angle)

? 要解釋3d旋轉(zhuǎn)浅辙，必須要先弄清楚旋轉(zhuǎn)軸。關(guān)于旋轉(zhuǎn)軸阎姥，如下：

.rotateX {
  transform: rotateX(45deg);
}
.rotateY {
  transform: rotateY(45deg);
}
.rotateZ {
  transform: rotateZ(30deg);
}

.rotateX {
  transform: perspective(100px) rotateX(45deg);
}
.rotateY {
  transform: perspective(100px) rotateY(45deg);
}
.rotateZ {
  transform: perspective(100px) rotateZ(30deg);
}

.rotate3d {
  background: lightgreen;
  transform: perspective(100px) rotate3d(1,0,-1,30deg);
}

?

# 傾斜 - transform: skew(x-angle, y-angle)

? skew傾斜系列

? skew傾斜允許使用一個(gè)值，當(dāng)使用一個(gè)值時(shí)表示 y-angle 為0俱济；傾斜有一個(gè)難點(diǎn)就是它的直角坐標(biāo)系嘶是，關(guān)于官方的一大堆解釋我們不做深入研究钙勃，為方便理解蛛碌，如下(圖侵刪)

.skewed {
  transform: skewX(45deg);
}

.skewed {
  transform: skewY(20deg);
}

.skewed {
  transform: skewX(30deg,10deg);
}

?

# 矩陣 - matrix

? 矩陣是什么亡脑？別的一看就懂，但這個(gè)是什么邀跃？看不懂懊棺伞？其實(shí)拍屑，矩陣就是這東西：

矩陣與圖形變換關(guān)系

? 還是不懂途戒？簡單來說，矩陣就是使圖形發(fā)生變化（傾斜僵驰，縮放喷斋，旋轉(zhuǎn)唁毒，平移）的原理所在。接下來的內(nèi)容是頁面狗逆襲的途徑之一星爪，需要點(diǎn)數(shù)學(xué)基礎(chǔ)：

? 在線性代數(shù)中浆西，矩陣是這樣的（以單位矩陣為例）

transform: matrix(a,b,c,d,e,f);

如果你非要用坐標(biāo)來理解秒赤，也可以看成是

transform: matrix(x1, x2, y1, y2, z1,z2)

x' = ax + cy +  e   // 即：x坐標(biāo)
y' = bx + dy + f    // 即：y坐標(biāo)

記住了，ax+cy+e為變換后的水平坐標(biāo)幌甘，bx+dy+f表示變換后的垂直位置潮售。

說了這么一大堆，矩陣到底和圖形變換有什么關(guān)系锅风？我怎么越看越迷糊了酥诽？
? 不急，既然要’逆襲‘皱埠，就不可能那么簡單恩沛，為加深理解仔戈，看一個(gè)例子來直觀理解一下

transform: matrix(1,o,o,1,3o,3o);    /* a=1, b=0, c=0, d=1, e=30, f=30 */

假設(shè)矩陣偏移的中心點(diǎn)是 (0,0) , 即 x=0; y=0臣樱； 有如下式子

x' = ax + cy +  e  = 1*0 + 0*0 + 30 = 30
y' = bx + dy + f = 0*1 + 1*0 + 30 = 30

于是筛严，我們得到偏移后的坐標(biāo)為 (30,30)；這是什么變化忘巧？相信大家都猜到了恒界，沒錯(cuò)，這是平移變化砚嘴，即

transform: translate(30px, 30px)

聰明的你或許已經(jīng)看破了十酣，對于平移效果，其實(shí)矩陣公式是這樣的际长；

transform: matrix(跟我無關(guān), 我不知道, 一邊玩去, 愛咋咋地, x軸偏移量耸采，y軸偏移量)

前面是個(gè)參數(shù)都是沒用的，因?yàn)橄禂?shù)(x,y) 為0.

? 平移容易理解也颤，那么洋幻，其他效果呢？ 我們來看看縮放:
? 或許你也猜到了翅娶，和縮放相關(guān)的也是兩個(gè)參數(shù)文留，是的好唯，完全正確，假設(shè)比例是s燥翅，則有matrix(s, 0, 0, s, 0, 0)骑篙，于是得到：
x' = ax+cy+e = s*x+0*y+0 = s*x;
y' = bx+dy+f = 0*x+s*y+0 = s*y;
也就是
transform: matrix(sx,0,0,sy,0,0); 等同于 scale(sx, sy);

? 前兩個(gè)都還能接受，旋轉(zhuǎn)就選對復(fù)雜些森书，需要用到三角函數(shù)靶端，使用參數(shù)如下：

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

結(jié)合矩陣公式有

x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

我們可能計(jì)算得到如下一個(gè)式子：

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

好難好難，其實(shí)說實(shí)在的凛膏，要是我肯定不這么寫杨名，太麻煩了，用 rotate(20deg) 還是直接很多猖毫。

? 拉伸(skew) 也比較復(fù)雜台谍，也是用到三角函數(shù)，使用參數(shù)如下吁断，

matrix(1,tan(θy),tan(θx),1,0,0)

套用矩陣公式計(jì)算結(jié)果為：

x' = x+y*tan(θx)+0 = x+y*tan(θx) 
y' = x*tan(θy)+y+0 = x*tan(θy)+y

對應(yīng)于skew(θx + "deg"趁蕊，θy+ "deg")這種寫法。
好麻煩好麻煩仔役，我也不想用 matrix 來表示拉伸掷伙。

matrix 工具

估計(jì)你看完 martix 還是滿腦渾水，推薦一個(gè)測試工具矩陣變形又兵，可以在里面自己多做些嘗試任柜。

# 視距 - perspective

? 視距表示觀察者距離圖像的距離，是繪制3d效果必不可少的屬性之一寒波〕伺危可以回顧一下開篇第一張圖片升熊，眼睛位置就是觀察者位置俄烁，d + z (z可以是負(fù)數(shù)) 就表示的是視距。

? 視距的表示有兩種方法级野，一種是：

transform: perspective(100px);

另一種是

perspective: 100px;

前者作為transform的值來使用页屠，后者作為transform的前置屬性，不過需要兩種效果不太一致蓖柔，前置屬性需要設(shè)置在父元素上生效辰企。

# 后語

? 本文主要介紹 transform 的可選值以及它們的具體用法，知識(shí)點(diǎn)有些多需要大家慢慢消化况鸣，另外前置屬性還算相對容易一些牢贸，可以自行去了解一下用法。本文如果有不對或不好的地方镐捧，歡迎到評論區(qū)交流潜索。