2D变形
transform-origin为变形的基准点，对以下变形均有效。默认是中心，可以取值:
top, bottom, left, right, center
百分数如
transform-origin: 0% 0%;旋转rotate
transform:rotate(30deg);位移translate
相对于自身
transform:translate(200px,150px);
// 只设置一个方向
transform:translateY(100px);
// 也可以设置成自身宽度的百分比
transform:translate(-50%,-50%);
- 缩放scale
//单独设置宽高
transform:scale(2, 0.5);
//只设置一个方向
transform:scaleY(0.3);
//宽高等比缩放
transform:scale(3);
- 扭曲skew
transform:skew(10deg, 20deg);
transform:skewY(10deg);
transform:skew(10deg);
transform:skew(30deg,10deg)如下图:
扭曲.png
- 矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>)
3D变形
- 可以利用perspective来激活3D效果（相当于视距，离得近3D效果就好，远就不明显）
- 在transform属性中使用perspective方法
transform: perspective( 600px );
- 直接使用perspective属性
perspective: 600px;
二者区别主要在作用于多个元素的时候展示效果会有不同
对比.png
- 参数
rotateX( )
rotateY( )
rotateZ( )
translateZ( )
scaleZ( )
// 缩写方法，需要把三个参数写全（可能会触发硬件加速，提高渲染性能，即使像translate3d(0,0,0)这样什么也没发放改变）
translate3d( tx, ty, tz )
scale3d( sx, sy, sz )
rotate3d( rx, ry, rz, angle )
rotateXYZ.png
translateZ.png
