day14 3d动画/位移/旋转/缩放

1. 动画属性

(1) 定义动画

• @keyframes 动画名{

  关键帧

  from{}

  to{}

  }

• @keyframes 动画名{

  ​ 关键帧划分的是时间，一般百分比增量要相同 0%-100%

  ​ 比如完成整个动画需要5s

  ​ 0%{} 0s

  ​ 10%{} 0.5s

  ​ 20%{} 1s

  ​ 50%{} 2.5s

  ​ 100%{} 5s

  ​ }

(2) 使用动画

• animation-name: 动画名
• animation-duration: 动画执行的时间 s/ms
• animation-delay: 动画延迟时间 s/ms
• animation-timing-function: linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(慢-快-慢)
• animation-iteration-count: 数字/infinite(无限次)
• animation-direction: reverse(关键帧反向播放)/alternate(关键帧交替播放 0%-100%-0%)
• animation-fill-mode:动画停止的关键帧，使用该属性的话，不可以设置无限循环，不然停不下来。forwards(最后一个关键帧)/backwards(第一个关键帧)
• animation-play-state: running(运行)/paused(停止)

• 复合写法：

  • animation: 动画名 动画执行的时间 动画延迟时间 动画效果 执行次数

2. 3d位移

• z轴位移 transform：translateZ(数值+px) 不要使用百分比
• xyz位移 transform: translate3d(x轴位移,y轴的位移,z轴的位移)

3. 3d旋转

• x轴旋转 transform:rotateX(数值+deg)
• y轴旋转 transform:rotateY(数值+deg)

• xyz都旋转 transform:rotate3d(a,b,c,d)

  • a b c的取值为0或者1。0代表不旋转，1代表旋转。
  • d是旋转度数
  • 也可以使用tranform: rotateX() rotateY() rotateZ();

• 形成3d舞台：在父元素身上添加，看到效果之后， 需要加个旋转（旋转x,y,因为有些效果在初始的平面看不到）

  • transform-style:flat(平面)/ preserve-3d(空间)
• 背部隐藏： 设置了透明后，但是不想看到后面的内容，给该元素 backface-visibility: hidden;
• perspective: 数值+px； 值越小越近， 看到的越大

4. 3d缩放

• z轴transform:sacleZ()
• xyz缩放 transform:scale3d(x缩放值,y缩放值,z缩放值)