来回顾一下昨天的学习内容
1.3D转化
通过transform标签来进3D转化。
1.1 transform:translate3D()
transform:translateX() translateY() translateZ()
来进行3D平移
transform:rotateX()
transform:rotateY()
transform:rotateZ()
来进行3D的旋转
1.2 perspective:
来定义3D元素的距离视图的距离. 属性有perspective: none; perspective: 800px; perspective: 5.5cm; perspective: 23rem;
1.3 transform-style:3D-perserve
来使元素具有3D控件属性
一般给父元素添加
2. 动画的使用
2.1动画的属性
@keyframe 动画名称{ from{动画的起始} to{动画的结束} }
2.2 动画的调用
div{ animation: }
2.2.2 动画调用的元素
animation-name:动画名称
animation-duration:动画的时长
animation-delay: 动画的延迟时间
animation-fill-mode:forwards 动画停留最后一帧
backwards 动画停留第一帧
animation-timing-function:steps(X)把动画分为X帧
animation-iteration-count: infinite 动画进行的循环次数 infinite为无线循环
animation-direction:alternate 为动画的方向 alternate为反方向
animation-paly-state:pausde 暂停 通常配合hover使用