transform
學習資源
https://www.runoob.com/cssref/css3-pr-transform.html
https://c.runoob.com/codedemo/3391
不自己敲敲，還是不靠譜
// 語法
transform:none|transform-funcitons;(none)
| 值 | 描述 |
|---|---|
| none | 定義不進行轉換 |
| matrix(n,n,n,n,n,n) | 定義2D轉換，使用6個值的矩陣 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義3D轉換，使用16個值的4*4矩陣 |
| translate(x,y) | 定義2D轉換 |
| translate3d(x,y,z) | 定義3D轉換 |
| translateX(x) | 定義X軸位移的值 |
| translateY(y) | 定義Y軸位移的值 |
| translateZ(z) | 3D轉換，定義Z軸位移的值 |
| scale(x[,y]?) | 2D縮放 |
| scale3d(x,y,z) | 3D縮放 |
| scaleX(x) | X軸縮放 |
| scaleY(y) | Y軸縮放 |
| scaleX(z) | Z軸縮放 |
| rotate(angle) | 2D旋轉，度數 |
| rotate3d(x,y,z,angle) | 3D旋轉 |
| rotateX(angle) | X軸旋轉 |
| rotateY(angle) | Y軸旋轉 |
| rotateZ(angle) | Z軸旋轉 |
| skew(x-angle,y-angle) | X軸和Y軸傾斜 |
| skewX(angle) | X軸傾斜 |
| skewY(angle) | Y軸傾斜 |
常用translate、scale、rotate
perspective(n) :3D轉換，定義透視視圖,設置在父元素上面
transform-origin:x-axis y-axis z-axis;設置轉換元素的位置。
* x-axis：left、center、right、length、%
* y-axis：top、center、bottom、length、%
* z-axis：length
// 86.6