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