给元素添加3d效果
1.目的：实现近大远小
2.给需要3d效果的子元素的父元素添加透视 perspective 通常取值范围为600~1200 一般给body加的
3.perspective:透视、视距、景深
translate
translateX()
translateY()
translateZ() 在z轴上旋转
translate3d(x,y,z) 分别在x，y,z轴上旋转
3d呈现
1.透视实现的是子元素近大远小效果，但实际处在的空间依旧是2d空间
2.给需要立体空间的子元素的父元素添加
3.transform-style:preseve-3d 开启子元素的立体空间
旋转
rotateX()
rotateY()
rotateZ()
totates3d(x,y,z,deg) 自定义轴旋转,x,y,z一般取值在0~1
动画
1.animation:动画名称 动画执行时间 运动曲线 延迟时间 执行次数 是否反方向 动画最终状态
2.定义动画：@keyframes
- 1.@keyframes 动画名称{ 起始状态from{ } 最终状态to{} }
- 2.@keyframes 动画名称{0%{} 20%{} 70%{} 100%{}}
3.比较重要的单词
- infinite 循环的、无限
- forwards 动画停留在终止状态
- linear 匀速的
- alternate 反方向
4.实现逐帧动画
- 1.拿运动曲线为匀速来说，补间动画就是将一张图匀速的移动
- 2.steps(几步)
- 3.逐帧动画一般都用作一张精灵图分几个步骤去完成效果，可以实现动画人物持续跑动的效果
- 4.设置了steps() 就不能设置运动曲线 两者冲突
注意点：
-
1.如果有两个时间，第一个表示动画执行时间，第二个表示动画延迟时间
-
2.动画里的属性也可以分开来写
- animation-delay 动画延迟的时间
- animation-pause-state 控制动画暂停或播放
- animate-direction 动画执行方向
