《圖解CSS3》筆記2 transform變形

標籤：style   sp   for   on   bs   cti   ef   line   tt   

2D transform支援4種變形方式和矩陣, 多種變形函數以空格隔開：

1. 移動　　translate(+-xOffset, yOffset)　　+右移-左移

2. 縮放　　scale(0.01~0.99| >1)　　　　　　0.01~0.99為縮小，>1為放大

3. 翻轉　　skew()

4. 旋轉　　rotate(+-Xdeg)　　　　　　　　+順時針轉，-逆時針轉X度

5. 矩陣　　matrix()

 

3D transform支援3種變形方式和矩陣, 多種變形函數以空格隔開：

1. 移動　　translate3d(x, y, z)　　　　　translateZ()

2. 縮放　　scale3d()　　　　　　　　　　scaleZ()　　　　　

3. 旋轉　　rotate3d()　　　　　　　　　 rotateZ()  rotateX() rotateY()

4. 矩陣　　matrix3d()

5. 投影　　perspective() 

 

transform-origin: 用來指定變形時，元素中心點的位置（預設：50%），取值有兩類：

　　1. 關鍵字：　　left center right | top center bottom

　　2. 位移量:　　 -100% 0% 50% 100% 200%

 

transform-style: 指定3D控制項中，內嵌子項目如何呈現，兩個值：

　　1. flat：　　　(預設)子項目在2D平面呈現

　　2. perserve-3d: 子項目呈現在前面或後面

 

perspective:　　觀察者與元素3D控制項內Z平面的距離（視距）：

　　1. none　　(預設)無線遠的角度來看，近乎於平

　　2. 數值　　數值越大，距離越遠，感受越不明顯；數值越小，距離越近，感受明顯；

 

backface-visibility： 元素的背面是否可見，有兩個值： visible | hidden；

 

《圖解CSS3》筆記2 transform變形