WEBSTORM前端 —— 第3章：移动 Web —— 第2节：空间转换、转化

一、空间转换

1.空间转换

2.空间转换 – 平移

3.视距 perspective

4.空间 – 旋转

③空间旋转——Z轴代码与效果视频

④空间旋转——X轴代码与效果视频

⑤空间旋转——Y轴代码与效果视频

5.立体呈现 – transform-style

案例 – 3D 导航

6.空间转换 – 缩放

①属性

②效果视频与代码

二、动画 - animation

1.动画 - animation

③动画体验效果视频与代码

④动画实现步骤

⑤animation复合属性

⑥animation拆分写法

⑦.案例—走马灯效果

2.动画 – 逐帧动画

3.动画 – 多组动画

4.案例—全民出游

一、空间转换

1.空间转换

①空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。

②空间转换也叫 3D转换

③属性：transform

2.空间转换 – 平移

①属性

②取值：（正负均可）

像素单位数值
百分比（参照盒子自身尺寸计算结果）

③提示：默认情况下，Z 轴平移没有效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>空间平移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }
    .box:hover {
      /* 电脑是平面，默认无法观察 Z 轴平移效果 */
      /* transform: translate3d(100px, 200px, 300px); */
      /* 3d 小括号里面必须逗号隔开三个数 */
      /* transform: translate3d(100px, 200px); */
      transform: translateX(100px);
      transform: translateY(-100%);
      transform: translateZ(300px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

效果图：

3.视距 perspective

①作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

②透视效果：近大远小、近实远虚

③属性：(添加给父级，取值范围 800-1200)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    /* 视距属性必须添加给 直接父级 */
    .father {
      perspective: 1000px;
      /* perspective: 10000px;
      perspective: 100px; */
    }
    .son {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }
    .son:hover{
      transform: translateZ(-300px);
      transform: translateZ(300px);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

效果视频：

移动web【视距 perspective】

4.空间 – 旋转

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值);

①左手法则 – 根据旋转方向确定取值正负：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

②拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字

③空间旋转——Z轴代码与效果视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-Z轴</title>
    <style>
      .box {width: 300px;margin: 100px auto;}
      img {width: 300px;transition: all 2s;}
      .box img:hover {transform: rotateZ(360deg);}
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

空间旋转——Z轴代码与效果视频

④空间旋转——X轴代码与效果视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-X轴</title>
    <style>
      .box {width: 300px;margin: 100px auto;}
      img {width: 300px;transition: all 2s;}
      .box { /* 透视效果：近大远小，近实远虚 */perspective: 1000px;}
      .box img:hover {transform: rotateX(60deg);transform: rotateX(-60deg);}
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

空间旋转——X轴代码与效果视频

⑤空间旋转——Y轴代码与效果视频

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-Y轴</title>
    <style>
      .box {width: 300px;margin: 100px auto;}
      img {width: 300px;transition: all 2s;}
      .box { /* 透视效果：近大远小，近实远虚 */perspective: 1000px;}
      .box img:hover {transform: rotateY(60deg);transform: rotateY(-60deg);}
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

空间旋转——Y轴代码与效果视频

5.立体呈现 – transform-style

①作用：设置元素的子元素是位于 3D 空间中还是平面中

②属性名：transform-style

③属性值：

flat：子级处于平面中
preserve-3d：子级处于 3D 空间

④呈现立体图形步骤

父元素添加transform-style: preserve-3d；
子级定位
调整子盒子的位置（位移或旋转）

⑤提示：空间内，转换元素都有自已独立的坐标轴，互不干扰

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立体呈现</title>
    <style>
      .cube {position: relative;width: 200px;height: 200px;margin: 100px auto;
        /* background-color: pink; */
        transition: all 2s;transform-style: preserve-3d;
        /* 旋转与案例效果无关，用来看前后移动的效果 */ /* transform: rotateY(89deg); */}
      .cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}
      .front {background-color: orange;transform: translateZ(100px);}
      .back {background-color: green;transform: translateZ(-100px);}
      .cube:hover {transform: rotateY(90deg);}
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>
  </body>
</html>

效果视频：

立体呈现 – transform-style

案例 – 3D 导航

效果视频与代码：

案例 – 3D 导航

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D导航</title>
    <style>
      ul {margin: 0;padding: 0;list-style: none;}
      .nav {width: 300px;height: 40px;margin: 50px auto;}
      .nav ul {display: flex;}
      .nav li {position: relative;width: 100px;height: 40px;line-height: 40px;
        transition: all 0.5s;transform-style: preserve-3d;
        /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
        /* transform: rotateX(-20deg) rotateY(30deg); */}
      .nav li a {position: absolute;left: 0;top: 0;display: block;width: 100%;
        height: 100%;text-align: center;text-decoration: none;color: #fff;}
      /* 立方体每个面都有独立的坐标轴，互不影响 */
      .nav li a:first-child {background-color: green;transform: translateZ(20px);}
      .nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}
      .nav li:hover {transform: rotateX(-90deg);}
    </style>
  </head>
  <body>
    <div class="nav">
      <ul><li><a href="#">首页</a><a href="#">Index</a></li>
          <li><a href="#">登录</a><a href="#">Login</a></li>
          <li><a href="#">注册</a><a href="#">Register</a></li></ul>
    </div>
  </body>
</html>

6.空间转换 – 缩放

①属性

transform: scale3d(x, y, z);

transform: scaleX();

transform: scaleY();

transform: scaleZ();

②效果视频与代码

空间转换 – 缩放

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间缩放</title>
    <style>
      ul {margin: 0;padding: 0;list-style: none;}
      .nav {width: 300px;height: 40px;margin: 50px auto;}
      .nav li {position: relative;float: left;width: 100px;height: 40px;
        line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;
        transform: scaleX(0.5);transform: scaleY(2);transform: scaleZ(3);
        transform: scale3d(0.5, 2, 3);}
      .nav li a {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
        text-align: center;text-decoration: none;color: #fff;}
      .nav li a:first-child {background-color: green;transform: translateZ(20px);}
      .nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}
      .nav li:hover {transform: rotateX(-90deg);}
    </style>
  </head>
  <body>
    <div class="nav">
      <ul><li><a href="#">首页</a><a href="#">Index</a></li>
          <li><a href="#">登录</a><a href="#">Login</a></li>
          <li><a href="#">注册</a><a href="#">Register</a></li></ul>
    </div>
  </body>
</html>

二、动画 - animation

1.动画 - animation

①过渡：实现两个状态间的变化过程

②动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

③动画体验效果视频与代码

动画体验效果视频与代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>体验动画</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;

        animation: change 1s infinite alternate;
      }

      @keyframes change {
        0% {
          transform: translate(0);
        }

        100% {
          transform: translate(600px);
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

④动画实现步骤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画实现步骤</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        animation: change 1s;
      }

      /* 动画一：宽度从200变化到800 */
      /* @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      } */


      /* 动画二：从 200*100 变化到 300*300 变化到800*500 */
      /* 百分比：表示的意思是动画时长的百分比 */
      @keyframes change {
        0% {
            width: 200px;
            height: 100px;
        }
        20% {
            width: 300px;
            height: 300px;
        }
        100% {
            width: 800px;
            height: 500px;
        }
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

⑤animation复合属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation复合属性</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* linear：匀速 */
        animation: change 1s linear;
        /* steps：分步动画，工作中，配合精灵图实现精灵动画 */
        animation: change 1s steps(3);
        /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
        animation: change 1s 2s;
        /* 重复次数，infinite：无限循环 */
        animation: change 1s 3;
        animation: change 1s infinite;
        /* alternate：反向 */
        animation: change 1s infinite alternate;
        /* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
        animation: change 1s forwards;
        animation: change 1s backwards;
      }
      /* 宽度 从 200 变化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

⑥animation拆分写法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation拆分写法</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        /* 动画名称 */
        animation-name: change;
        /* 动画时长 */
        animation-duration: 1s;
        /* 播放次数 */
        animation-iteration-count: infinite;

        /* animation-play-state: paused; */
      }

      .box:hover {
        /* 暂停动画 */
        animation-play-state: paused;
      }


      /* 宽度从 200 变化到 800 */
      @keyframes change {
        0% {
            width: 200px;
        }
        100% {
            width: 800px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

⑦.案例—走马灯效果

案例—走马灯效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>走马灯</title>
    <style>
      * {padding: 0;margin: 0;}
      li {list-style: none;}
      img {display: block;width: 200px;}
      .box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}
      .box ul {display: flex;animation: move 6s infinite linear;}
      /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
      @keyframes move {
        0% {transform: translate(0);}
        100% {transform: translate(-1400px);}
      }
      .box:hover ul {animation-play-state: paused;}
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!-- 替身：填补显示区域的露白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

2.动画 – 逐帧动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

效果视频：

动画 – 逐帧动画

3.动画 – 多组动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多组动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
        run 1s steps(12) infinite,
        move 3s forwards;}
    /* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */
    @keyframes run {
      /* from {background-position: 0 0; } */
      to {background-position: -1680px 0;} }
    @keyframes move {
      /* 0% {transform: translate(0);} */
      100% {transform: translate(800px);} }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

4.案例—全民出游

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .box {
        width: 100%;
        height: 100%;
        background: url('images/f1_1.jpg') no-repeat top center;
        background-size: cover;
        position: relative;
      }

      .cloud img {
        position: absolute;
        left: 50%;
      }

      .cloud img:nth-child(1) {
        top: 20px;
        margin-left: -260px;
        animation: cloud 2s linear infinite alternate;
      }

      .cloud img:nth-child(2) {
        top: 100px;
        margin-left: 380px;
        animation: cloud 2.5s linear infinite alternate;
      }

      .cloud img:nth-child(3) {
        top: 200px;
        margin-left: -560px;
        animation: cloud 3s linear infinite alternate;
      }

      .balloon {
        position: absolute;
        left: 50%;
        top: 20%;
        margin-left: -390px;
        animation: balloon 1.5s linear alternate infinite;
      }

      .giraffe {
        position: absolute;
        left: 50%;
        margin-left: 160px;
        top: 15%;
      }

      .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: text 1s ease forwards;
      }

      .jump_text img {
        position: absolute;
        left: 50%;
        bottom: 42px;
        width: 100px;
      }

      .jump_text img:nth-child(1) {
        margin-left: -390px;
        animation: jump_text 0.8s infinite alternate;
      }

      .jump_text img:nth-child(2) {
        margin-left: -180px;
        animation: jump_text 0.8s 0.2s infinite alternate;
      }

      .jump_text img:nth-child(3) {
        margin-left: 35px;
        animation: jump_text 0.8s 0.4s infinite alternate;
      }

      .jump_text img:nth-child(4) {
        margin-left: 240px;
        animation: jump_text 0.8s 0.6s infinite alternate;
      }

      /* 白云动画 */
      @keyframes cloud {
        0% {
          transform: translateX(0px);
        }

        100% {
          transform: translateX(40px);
        }
      }

      /* 热气球动画 */
      @keyframes balloon {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-30px);
        }
      }

      /* 跳动文字 */
      @keyframes jump_text {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-30px);
        }
      }

      /* 文字 */
      /* 注意：因为transform是复合属性，所以我们要重新申明一遍translate */
      @keyframes text {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }
        20% {
          transform: translate(-50%, -50%) scale(0);
        }

        40% {
          transform: translate(-50%, -50%) scale(1.4);
        }

        70% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 白云 -->
      <div class="cloud">
        <img src="images/yun1.png" />
        <img src="images/yun2.png" />
        <img src="images/yun3.png" />
      </div>

      <!-- 热气球 -->
      <div class="balloon">
        <img src="images/san.png" />
      </div>

      <!-- 长颈鹿 -->
      <div class="giraffe">
        <img src="images/lu.png" />
      </div>

      <!-- 文字 -->
      <div class="text">
        <img src="images/font1.png" />
      </div>

      <!-- 跳动文字 -->
      <div class="jump_text">
        <img src="images/1.png" />
        <img src="images/2.png" />
        <img src="images/3.png" />
        <img src="images/4.png" />
      </div>
    </div>
  </body>
</html>