关于css:day14-3d动画位移旋转缩放

47次阅读

共计 1079 个字符,预计需要花费 3 分钟才能阅读完成。

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 缩放值)
正文完
 0