css3 2D变换
- 相关属性
transform 2d/3d属性转换
transform-origin 更改旋转基点
- 2d动画方法
1.位移
translate(x,y) 沿着x轴y轴移动
translateX(n) 沿着x轴移动
translateY(n) 沿着y轴移动
2.缩放
scale(x,y)更改元素的宽度和高度，将元素的宽度变为原来的x倍，将元素的高度变为原来的y倍
scaleX(n) 更改元素宽度
scaleY(n) 更改元素高度
3.旋转
rotate(angle)
4.斜切（只存在于2d当中）
skew(x-angle,y-angle) 定义2d倾斜旋转 沿着x轴和y轴
skewX(angle) 沿着x轴旋转
skewY(angle) 沿着y轴旋转
css3 3D变换
- 3d属性
transform 2d/3d转换
transform-origin 更改旋转基点
transform-style:preserve-3d
perspective 视距/透视效果 参考
perspective-origin 景深基点（观察物体角度）
backface-visibility:visible | hidden 背面隐藏
- 3d方法
translate3d(x位移，y位移，z位移)
scale3d(x宽倍数，y宽倍数，z元素在z轴的缩放倍数)
rotate3d(x,y,z,angle)
css3 动画
- 相关属性
@keyframes 设定关键帧
animation 所有动画的简写属性，除了animation-play-state以外
animation-name 通过动画名称调用关键帧
animation-duration 动画所需时间 s/ms
animation-timing-function 动画执行速度
animation-delay 延迟
animation-iteration-count 动画播放次数，默认为1，可以定义为一个数字代表次数。无数次为infinite
animation-direction 是否循环交替反向播放动画
animation-play-state 动画运行或者暂停
animation-fill-mode 动画在播放之前或者之后，动画效果是否可见
- 关键帧的设定
格式一般为：
@keyframes move {
0% {
}
50% {
}
100% {
}
}
注：move为关键帧的名字，想要使用关键帧来运行动画，需要通过animation：关键帧名 来调用关键帧，并且执行。