day02-移动web(空间转换)

一、空间转换

• 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
• 空间：是以坐标轴定义的。x、y和z三条坐标轴构成了一个立体空间，规定z轴的位置与视线方向相同。
• 本质：在平面转换的基础上，多出一个Z轴可缩放、旋转、位移
• 属性：transform

1.1 空间位移

• 目标：使用translate实现元素空间位移效果
• 语法：
  1.连写：transform: translate3d((x， y，z)
  2.单方向：transform: translateX() 或 translateY()或 translateZ()
  3.快捷键：tf (transform)、ts (translate)
  取值（正负均可）
  1.像素单位数值
  2.百分比
• 注意：

1. X轴正向为右，Y轴正向为下，Z轴贴近眼睛方向为正
   translate()
2. 如果只给出一个值, 表示x轴方向移动距离，例：transform: translate(100px);表示向右平移100px.
3. 单独设置某个方向的移动距离：translateX() & translateY()& translateZ()
4. 默认情况下，z轴移动观察不到效果

• 易错点：若多方向位移时，同一属性会被覆盖，此时最底下的那个生效。）（特殊：z轴默认看不到效果）

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: skyblue;
      transition: all 0.5s;
    }

    .box:hover {
      /* 此时只有Y轴生效 */
      /* transform: translateX(-100%);
      transform: translateZ(-100%);
      transform: translateY(-100%);  */

      /* 连写：此时 位移只有x轴和y轴有效果*/
      transform: translate3d(200px,200px,200px);
    }

1.2 透视效果

• 目标：使用perspective属性实现透视效果
• 属性：（添加给父级）

1. perspective: 值;
2. 取值：像素单位数值，数值一般在800~1200
3. 快捷键：pe
4. 作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

• 注意：
  1.Z轴不能大于父级的取值，否则会出现闪屏
  2.透视属性只是视觉上放大缩小盒子，并不会产生真正的3d效果

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: skyblue;
      transition: all 0.5s;
 
      /* border: 1px solid #000; */
    }
    body {
      /* 取值400~1200 */
      /* 透视属性给父级 快捷pe */
      perspective: 800px;
    }

    .box:hover {
      /* transform: translateZ(1500px); */
      /* transform: translateZ(0); */
      /* 取值为0无变化 */

      /* 注意：Z轴不能大于父级的取值 */
      /* 大于父级的值，会闪屏 */
      /* transform: translateZ(500px) */
      transform: translateZ(801px);
    }

1.3开启3d空间

• 语法：transfrom-style：preserve-3d
• 快捷键： tfs
• 注意：
  写给父元素，让子元素处于真正的3d空间内

1.4 空间旋转

• 目标：使用rotate实现元素空间旋转效果
• 语法:

1. transform: rotateZ(值);
2. transform: rotateX(值);
3. transform: rotateY(值);
4. 快捷键：rox、roy 、 roz
5. 注意：值带单位deg

• 左手法则：
  1.左手握住旋转轴，拇指指向旋转轴的正值方向。拇指弯曲的方向，就是旋转的正值方向
  2.作用：确定旋转的方向

1.4.1 空间旋转-Z轴

• 目标：使用rotate实现元素空间绕Z轴旋转效果
• 语法：transform: rotateZ(值);

      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box img:hover {
        transform: rotateZ(-360deg);
        /* transform: rotate(360deg); */
      }

• 效果 图
  

1.4.2 空间旋转-X轴

• 目标：使用rotate实现元素空间绕X轴旋转效果
• 语法：transform: rotateX(值);

      body {
        background-color: #333;
      }
      .box {
        width: 200px;
        margin: 100px auto;
      }

      img {
        width: 200px;
        transition: all 2s;
      }

      .box {
        /* 添加视距 */
        perspective: 1000px;
      }
      .box img:hover {
        transform: rotateX(-45deg);
      }

1.4.3 空间旋转-Y轴

• 目标：使用rotate实现元素空间绕Y轴旋转效果
• 语法：transform: rotateY(值);

 transform: rotateY(-90deg);

• 效果图：未旋转完毕，90度会变没
  

1.4.4 沿着多条对称轴旋转

• 目标：使用rotate实现元素空间沿着多条对称轴旋转效果

      body {
        background-color: #333;
      }
      .box {
        width: 200px;
        margin: 100px auto;
      }

      img {
        width: 200px;
        transition: all 2s;
      }
      .box {
        perspective: 800px;
      }
      .box img:hover {
        transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
      }

• 效果图
  

1.5 立体呈现

• 目标：使用transform-style: preserve-3d实现元素3D效果
• 需求：设置一个大盒子包裹两个 盒子，使之呈现3D效果

      .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 2s;
      }

      .box div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }

      .front {
        background-color: orange;
      }

      .back {
        background-color: green;
      }
      .box {
        /* 视距：只能开启近大远小的效果，不能开启立体图形 */
        perspective: 1200px;
        /* 
        开启3d：才能让子元素呈现在3d图形中
         */
        transform-style: preserve-3d;
      }
      .box:hover .front {
        transform: translateZ(400px);
      }
      .box:hover {
        transform: rotateY(90deg);
      }

• 效果图：向眼睛方向（z轴正方向）平移，绕Y轴旋转 ，90度会变没
  

1.6 3D导航

• 目标：使用立体呈现技巧实现3D导航效果
• 步骤：

1. 搭建立方体，设置两个盒子一前一后
2. 添加hover 状态切换效果

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    ul {
      width: 500px;
      height: 40px;
      margin: 200px auto;
    }
    li {
      /* 1. 开启定位，让a重叠起来， */
      position: relative;
      /* transform: rotateX(-20deg) rotateY(30deg); */
      float: left;
      height: 50px;
      width: 150px;
      list-style: none;
      transition: 0.5s;
      /* 2.开启3d，给父元素li */
      transform-style: preserve-3d;
    }
    a {
      display: block;
      width: 100%;
      height: 50px;
      text-decoration: none;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
    }
    /* 5. 让第一个a标签沿着Z轴向前移动 */
    li a:first-child {
      background-color: green;
      transform: translateZ(20px);
    }
    /* 3. 让第二个a标签倒下 */
    li a:last-child {
      /* 4. 让a标签沿着Z轴向上移动 */
      background-color: orange;
      transform: rotateX(90deg) translateZ(20px);
    }
    /* 7. ll hover 时，旋转自己 */
    li:hover {
      transform: rotateX(-90deg);
    }
  </style>

<body>
  <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>
</body>