2D，动画，3D
2D转换（transform）
移动 ： translate(x,y) 不影响其他盒子
旋转 ： rotate(度数deg)
缩放： scale(x,y) 不影响其他盒子
转换中心点： transform-origin:x y;
连写注意顺序，一般位移放在最前面，能配合过渡
动画（animation）
1.用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {0%{}100%{}
}
2.元素使用动画
div {/*调用动画*/animation-name: 动画名称;animation-duration: 持续时间;
}
3.动画常见属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称（必须的） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease” |
| animation-delay | 规定动画何时开始，默认时0 |
| animation-iteration-count | 规定动画播放的次数，默认时1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal”,alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是“running”，还有“pause” |
| animation-fill-mode | 规定动画结束后的状态，保持forwards，回到起始backwards |
简写：animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
4.速度曲线
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 默认，先加速后减速 |
| ease-in | 以低速开始 |
| ease-out | 以低速结束 |
| ease-in-out | 以低速开始和结束 |
| steps() | 间隔数量（步长） |
3D转换（transform）
移动： translate3d(x,y,z)
透视： perspective 也就是视距，单位是像素
旋转： rotateX(deg),rotateY(deg),rotateZ(deg),rotate3d(x,y,z,deg) 左手准则
3D呈现: transfrom-style:flat子元素不开启立体空间，默认的 transfrom-style:preserve-3d子元素开启立体空间 写给父元素的
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！