2022.1.11

110 阅读1分钟

来回顾一下昨天的学习内容

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使用