歡迎光臨我的博客拓跋的前端客棧，這個(gè)是原文地址。如果您發(fā)現(xiàn)我文章中存在錯(cuò)誤，請(qǐng)盡情向我吐槽，大家一起學(xué)習(xí)一起進(jìn)步φ(>ω<*)
CSS transform 屬性允許你修改CSS視覺(jué)格式模型的坐標(biāo)空間。使用它，元素可以被轉(zhuǎn)換（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）。
首先有個(gè)直觀的印象，接下來(lái)放大招了~
transform轉(zhuǎn)換.png
怎么樣，是不是很直觀？如果圖片不清晰，在圖片上點(diǎn)擊右鍵-“在新標(biāo)簽頁(yè)中打開(kāi)圖片”，然后在圖片上點(diǎn)放大鏡就可以查看原圖了。
接下來(lái)有更直觀的，我手寫(xiě)了一個(gè)簡(jiǎn)單的transform體驗(yàn)器，自己嘗試一下吧：
不知道你搞懂了嗎？
PS:
- transform是一個(gè)理解上很簡(jiǎn)單，使用起來(lái)卻很有難度的屬性。短時(shí)間內(nèi)能理解80%就不錯(cuò)了，想完全掌握還需要多多練習(xí)。
- 本例中為了盡可能縮短篇幅，沒(méi)有涉及到transform中matrix部分和rotate3d的部分，想要繼續(xù)深入的話可以自行查找資料學(xué)習(xí)。
- translateZ()是一個(gè)很特別的屬性，需要結(jié)合perspective(透視)來(lái)理解。perspective可以簡(jiǎn)單理解為視點(diǎn)與屏幕之間的距離。當(dāng)未設(shè)置perspective屬性時(shí)，translateZ()的變化不會(huì)有任何影響。而設(shè)置perspective以后，translateZ()就符合“近大遠(yuǎn)小”的規(guī)律，Z軸上離你越近，圖形顯示越大。直到大過(guò)perspective值的時(shí)候，你就看不見(jiàn)了，這時(shí)候你就可以理解為元素到你“腦后”去了，人理所當(dāng)然的看不見(jiàn)腦后的東西。
- skew比較難搞懂，直接在圖里用文字很難描述清楚。這里引用知乎-css3中-webkit-transform 的 skew 如何使用？中Kori Lee的回復(fù)比較容易理解
skew.png
