CSS变换
translate
| 标题 | |
|---|
| 2D | translate(x,y) |
| 3D | translate3d(x,y,z) translateX(50px) translateY(50px) translateZ(50px |
rotate
| 标题 | |
|---|
| 2D | rotate(45deg) 默认是z轴 |
| 3D | rotate3d(45deg,45deg,45deg) rotateX(45deg) rotateY(45deg) rotateZ(45deg) |
scale
| 标题 | |
|---|
| 2D | scale(x,y) |
| 3D | scale3d(x,y,z) scaleX(0.7) scaleY(0.7) scaleZ(0.7) |
其他属性
transform-style
transform-style:preserve-3d(具有一个3d效果)
transform-origin
设置坐标原点。旋转，移动，伸缩的原点。
transform-origin: x-axis y-axis z-axis
persective
设置在父元素里面，只对子元素起作用
CSS动画
animation动画
| 标题 | |
|---|
| animation-name | 动画名称 |
| animation-duration | 动画持续时间，以s为单位，如果不设置，动画不会展示 |
| animation-timing-function | 动画运动曲线（ease,linear,ease-out,ease-in） |
| animation-delay | 延迟时间，以s为单位 |
| animation-iteration-count | 动画的执行次数，infinity(无限次) |
| animation-direction | normal(正常，左->右) reverse(反过来，右->左) alternate(左->右->左) alternate-reverse(右->左->右) |
| animation-fill-mode | 动画结束时的状态forwards(以最后帧为结束状态），backwards(以开始帧为结束状态) |
| animation-play-state | running(运行) paused(暂停) |
transition动画
| 标题 | |
|---|
| transition-property | 具有过渡效果的属性，默认为all |
| transition-duration | 过渡效果持续时间 |
| transition-timing-function | 过渡效果的速度曲线 |
| transition-delay | 过渡效果的延迟时间 |
参考链接
CSS3-animation动画详解
CSS transform属性
