移动web小白 第二天

一、空间转换

空间位移

• X轴方向位移

  transform:translateX();
  

• Y轴方向位移

  transform:translateY();
  

• Z轴方向位移

  transform:translateZ();
  

透视（视距）

perspective

• 给父元素添加，实现一个近大远小的效果，一般数值设置600px-1200px

          body {
              background-color: pink;
              /* 透视效果：近大远小 */
              perspective: 600px;
          }
  

空间旋转

• 围绕X轴旋转，显示一个上下旋转的效果，例：向上旋转90°

          img:hover {
              transform: rotateX(90deg);
          }
  

• 围绕Y轴旋转，显示一个左右旋转的效果，例：向右旋转90°

          img:hover {
              transform: rotateY(90deg);
          }
  

• 围绕Z轴旋转，朝屏幕放大或缩小，需配合perspective使用，不然只是旋转，正值顺时针，负值逆时针

          img:hover {
              transform: rotateZ(900deg);
          }
  

• 左手定则：左手大拇指指向轴线的正值方向，四指弯曲的方向即为正值旋转的方向。

• 自定义旋转

  transform:rotate3d(x,y,z,旋转的角度)
  

• 同时在两条轴线上旋转

      /* 旋转: 让大家在写代码的过程中看到立体盒子 */
      /* transform: rotateX(-20deg) rotateY(30deg); */
      /*3d导航可以给我们提供一个上帝视角*/
  

3D呈现

• transform-style: flat 平面，默认值

• transform-style: preserve-3d 开启3d环境

        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: 1s;
            /* 开启3d立体环境 */
            transform-style: preserve-3d;
          }
  

二、动画

定义动画

•         @keyframes move {
            from{}
            to {}
          }
  

•         @keyframes move {
              0%
              50% {}
              100% {}
          }
  

调用动画

• animation: 动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置

• 速度曲线

  -ease：默认

  -linear：匀速

  -step：逐帧动画

• 次数：infine(无限次)
• 反向播放：alternate
• 停留结束位置：forwards
• 暂停动画：animation-play-state: paused;
• 动画延迟：animation-delay