前言
CSS3的出現(xiàn)為頁(yè)面開(kāi)發(fā)劃出了新的篇章缔御！變形、轉(zhuǎn)換妇蛀、旋轉(zhuǎn)以及過(guò)渡和動(dòng)畫(huà)耕突，使得我們不再拘泥于2d思維的想象，而是創(chuàng)造于3d的思維模式评架。
因此眷茁，這篇文章也尤為重要。就例如纵诞，你想用HTML做一個(gè)稍微傾斜的logo：
image.png
1.gif
那么，我們這一篇文章說(shuō)明變形浙芙、轉(zhuǎn)換登刺、旋轉(zhuǎn)的具體操作，動(dòng)畫(huà)和過(guò)渡可以看另外兩篇：《CSS3動(dòng)畫(huà)》嗡呼、《CSS3過(guò)渡》
CSS3 transform 屬性
| 屬性名稱 | 屬性描述 |
|---|---|
| none | 無(wú)效果 |
| perspective | 透視 |
| translate | 移動(dòng) |
| rotate | 旋轉(zhuǎn)纸俭，單位deg |
| skew | 傾斜，單位deg |
| scale | 縮放 |
perspective 透視
基于3D效果南窗，即類似于舞臺(tái)效果揍很，凸顯元素運(yùn)用的涉及3d范疇的操作郎楼，例如旋轉(zhuǎn)、基于Z軸移動(dòng)窒悔、基于Z軸傾斜等呜袁。
X、Y蛉迹、Z軸的方向
對(duì)于塊級(jí)元素而言
- 左邊界為X軸傅寡，此時(shí)左邊界以右為正方向
- 上邊界為Y軸，此時(shí)上邊界以下為正方向
- 元素的平面對(duì)應(yīng)的軸為Z軸北救，此時(shí)向屏幕拉近（或理解為變大）為正方向
transform-origin 變換的顯現(xiàn)位置
-
transform-origin: x-axis y-axis z-axis;
這屬性其實(shí)不難理解荐操，例如默認(rèn)的縮放元素的基點(diǎn)，也就是顯現(xiàn)的位置是在元素正中央珍策，如果設(shè)置transform-origin:left top則顯現(xiàn)的過(guò)程會(huì)從左上角開(kāi)始托启，至于顯現(xiàn)過(guò)程可以利用過(guò)渡。
backface-visibility 旋轉(zhuǎn)后背面是否隱藏
如果使用了transform:rotateX(180deg)|rotateY(180deg)攘宙，此時(shí)面向我們的元素將是它的背面屯耸，我們甚至可以利用backface-visibility:hidden將其隱藏。
不難得知蹭劈，這些操作與過(guò)渡和動(dòng)畫(huà)的效果是相輔相成的疗绣，我們更可以充分發(fā)揮想象力去創(chuàng)造出與眾不同的空間頁(yè)面。
