transform

2D转换

1 translate( , )偏移方法
translate()根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

2 rotate()旋转方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

3 scale( , )缩放方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

4 skew( , )扭曲方法
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

 

3D转换

transform-style规定变换的样式（父元素）
属性值：flag平面（默认） preserve-3d（保持3d变换）

平移
整体写：transform:translate3d(x,y,z)

z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。

单独写：transform:translateZ(z)

旋转
整体写：transform:rotate3d(x,y,z,角度) 角度单位deg

此时x、y、z取值为0或1，0不旋转，1旋转

单独写：transform:rotateX(角度) transform:rotateY(角度) transform:rotateZ(角度）

 

 

 

动画
自定义动画
（1）通过@keyframes指定动画序列；
（2）通过百分比将动画序列分割成多个节点；
（3）在各节点中分别定义各属性
（4）通过animation属性将动画应用于相应元素；
animation属性
animation-name动画名字(必须)
animation-duration动画播放时间（必须）
animation-timing-function 动画播放的形式
属性值： linear线性 ease ease-in steps(n)
animation-delay 动画播放的延迟
animation-iteration-count 动画播放的次数 infinite无限次播放
animation-direction 动画是否轮流反向播放
属性值:alternate交替播放 reverse反向播放 alternate-reverse 轮流反向