2D变形

transform-origin为变形的基准点，对以下变形均有效。默认是中心，可以取值:

• top, bottom, left, right, center

• 百分数如transform-origin: 0% 0%;

• 旋转rotatetransform: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>)

关于Matrix

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

动画工具