动画2d 3d

1、2D变形：平移、旋转、缩放、倾斜

1) transform: translate()平移

• transform: translate(x,y) 沿着x轴和y轴移动

• transform: translateX(x) 沿着x轴移动

• transform: translateY(y) 沿着y轴移动

取值:

• px

• 百分比（强调相对于元素本身计算）

• 说明：允许负值，正值默认向右向下，负值向左向上

水平向右为正值，垂直方向向下正值

/* 沿着水平方向位移 */
当为一个值的时候，只沿着水平方向位移
transform: translate(50px);

2) transform: rotate(ndeg) 旋转

• 语法

• transform：rotate(deg);沿着中心点旋转，默认值

• transform: rotateX(deg);沿着X轴旋转

• transform: rotateY(deg);沿着Y轴旋转

单位：deg ​ 当角度值为正数时，元素沿着顺时针方向旋转 ​ 当角度值为负数时，元素沿着逆时针方向旋转