今天学习了
1.@keyframes关键帧设置
2.3d动画透视效果 动画里眼睛的视距
3.立体3d透视效果
4.设置旋转动画后div上下位置 下面详细总结
1.animation属性中@keyframes设置关键帧
@keyframes是浏览器兼容性前缀 针对不同的浏览器版本不一样
使用animation调用关键帧
animation:动画名称 动画时间 动画方式 延迟时间 动画播放次数 动画播方向
！infinite 无限次数播放 ！alternate 向前播放
2.3d动画透视效果 动画里眼睛的视距
近大远小
要实现3d效果必须在父元素上加上perspective
rotatex/rotatey/rotatez也可以直接调整3d效果
transform: rotateX(-30deg);为正值时上边向里旋转 为负值时上面向外旋转
transform: rotatey(-30deg);为正值时左边向外旋转 为负值时左面向里旋转
transform: rotatez(30deg);为正值时整个图像顺时针旋转 为负值时逆时针旋转
3.立体3d透视效果
实现3d立体透视必须给父元素设置 transform-style:preserve-3d
flat为默认值
4.设置旋转动画后div上下位置
