空间转换、动画

空间转换

空间位移

​ 使用translate实现元素空间位移效果。

• 语法：transform: translate3d(x, y, z);

• x轴：上下旋转 transform: rotateX(360deg) ;

  ​ 水平向右是正值，向左是负值。

• y轴：左右旋转 transform: rotateY(360deg);

  ​ 垂直向下是正值，向上是负值。

• z轴：垂直向内是正值，向外是负值。

透视

​使用perspective属性实现透视效果。

• 属性（添加给父级）

立体呈现

• 使用transform-style: preserve-3d呈现立体图形。

空间缩放

​ 使用scale实现空间缩放效果。

• transform: scaleX(倍数); 缩放宽度。
• transform: scaleY(倍数); 缩放高度。
• transform: scaleZ(倍数); 缩放厚度。
• transform: scale3d(x, y, z);

动画

• 使用animation添加动画效果。

    /* 名称+时长+速度曲线+延迟时间+重复次数+动画方向 */
  animation: box 1s steps(3) 1s 3 alternate;
  
  /* 鼠标移入时暂停动画 */
  .box:hover {
      animation-play-state: paused;
  }
  
  /* 设置动画的播放次数 2 */
  animation-iteration-count: infinite;
  

  • 无限循环：animation: 动画名称 1s **infinite **;

  • 匀速循环：animation-timing-function: linear ;

  • 动画执行方向（先正再反）：alternate ;

    （先反再正）：alternate-reverse ;

• 动画执行完毕时状态：forwards：最后一帧状态 ；

  ​ backwards：第一帧状态 ；

  • both：同时设置了forwards 和 backwards 。

    ​

  你是如何知道一个css属性有没有兼容性问题的？ caniuse