移动web第二天空间转换动画

一.空间转换

1.目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
2.空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换

3.属性：transform

1.png

二.空间位移

1.目标：使用translate实现元素空间位移效果
2.语法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
3.取值:像素单位数值,百分比(正负均可)

    <title>空间位移</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 0.5s;
      }

      .box:hover {
        /* Z轴的正方向为屏幕到人眼睛的方向 */
        /* 语法:transform: translateZ(); */

        /* 网页默认显示是2d的，看不到3d效果的 */
        /* transform: translateZ(300px); */
        transform: translate3d(100px,100px,300px);
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
  </body

三.透视效果

1.目标：使用perspective属性实现透视效果
2.默认情况下,无法观察到Z轴位移效果.因为:
Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
3.属性（添加给父级）
perspective: 值;

取值：像素单位数值，数值一般在800 – 1200。
5.作用:空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

2.png

    <title>透视效果</title>
    <style>
      /* 透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸） */
      body {
        /* pp给使用3D元素的最近一级父元素添加 */
        /* 添加视距 取值范围：400~1200px pp */
        /* 视距:其实就是在取值的地方安排一只眼睛 */
        perspective: 800px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 0.5s;
      }

      .box:hover {
        /* 3d的元素:包含X,Y,Z轴 */
        transform: translateZ(200px);
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
  </body>

四.空间旋转

1.目标：使用rotate实现元素空间旋转效果
2.语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
3.左手法则:
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

3.png

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

       /* 顺时针旋转 */
        transform: rotateZ(360deg);
        transform:  rotate(360deg);
        /* 逆时针旋转 */
        transform: rotateZ(-360deg);
        transform: rotate(-360deg);

盒子沿着Y轴旋转90度,在空间中是一条线
立体空间中一个点和一条线是不占位置的所以看不见

    <title>空间旋转-Y轴</title>
    <style>
      body {
        background-color: #333;
      }
      .box {
        width: 200px;
        margin: 100px auto;
        /* 添加视距 */
        perspective: 800px;
      }

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

      .box img:hover {
        /* 立体空间中一个点和一条线是不占位置的 所以看不见 */
        transform: rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/pk1.png" alt="" />
    </div>
  </body>

沿着多条对称轴旋转,属性值用空格隔开

  /* 属性值空格隔开 */
        transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

五.立体呈现

1.目标：使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？
答:不能,perspective只增加近大远小、近实远虚的视觉效果。
3.实现方法
添加 transform-style: preserve-3d;属性使子元素处于真正的3d空间
4.呈现立体图形步骤

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）
5.空间内，转换元素都有自已独立的坐标轴，互不干扰

六.3D导航

1.实现思路

4.png

2.代码

<title>3D导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .box {
            width: 300px;
            height: 40px;
            margin: 100px auto;    
            /* background-color: aqua;       */
        }
        .box li {
            width: 100px;
            /* 高度必须给,如果不给li的高度就是80,旋转时默认旋转点是盒子的中心点,会导致整个li盒子往下掉20px*/
            height: 40px;
            /* background-color: pink; */
            float: left;
            /* 添加过渡 */
            transition: 1s;
            /* 开启3d */
            transform-style: preserve-3d;
            /* 上帝视角 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }
        .box li a {
            display: block;
            width: 100px;
            height: 40px;
            background-color:orange;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
        .box li a:first-child {
            background-color:green;
            /* 2.绿色盒子沿着z轴正方向移动20px */
            transform: translateZ(20px);
        }
        .box li a:last-child {
            /* 1.橙色盒子往上走60px 然后沿着x轴正方向旋转90° */
            transform: translateY(-60px) rotateX(90deg);
        }
        .box li:hover {
            /* 3.鼠标悬停li 让整个li沿着x轴负方向旋转90度 */
            transform: rotateX(-90deg);
        }
       

    </style>
</head>
<body>
    <div class="box">
        <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>

七.动画

1.目标：使用animation添加动画效果

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

2.动画的实现步骤

2.1定义动画

5.png

2.2使用动画

6.png

 <title>动画实现步骤</title>
    <style>
      /* 注意点:
         1.动画的名称不能相同
         2.可参与过渡的css属性都可参与动画
         3.动画名不能使用running
         4.如果调用该动画的盒子样式和初始状态是一样的,可省略不写
       */

      .box1 {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
        animation: change 2s;
      }

      /* 一. 定义动画：让宽度从200变大到600 */
      @keyframes change {
        /* 初始状态 */
        from{
          width: 200px;
        }
        /* 结束状态 */
        to{
          width: 600px;
        }
      }

      .box2 {
        width: 200px;
        height: 100px;
        background-color: tomato;
        /* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
        animation: move 2s;
      }

      /* 二. 定义动画：200*100 到 500*300 到 800*500 */
      /* 1.定义动画 百分比可以实现阶段性的动画 */
      /* 百分比定义,可以让动画拥有多个状态 */
      /* 百分比指的就是动画执行的某一点 */
      @keyframes move {
        /* 初始状态 */
        /* 如果调用该动画的盒子样式和初始状态是一样的,可省略不写 */
        0%{
          width: 200px;
          height: 100px;
        }
        /* 中间状态 */
        50%{
          width: 500px;
          height: 300px;
          border-radius: 50%;
          background-color: hotpink;
          border: 10px solid red;
        }
        /* 结束状态 */
        100%{
          width: 800px;
          height: 500px;
          background-color: green;
          margin-left: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <br />
    <br />
    <div class="box2"></div>
  </body>

注意点:
1.动画的名称不能相同
2.可参与过渡的css属性都可参与动画
3.动画名不能使用running
4.如果调用该动画的盒子样式和初始状态是一样的,可省略不写

3.动画的属性

3.1目标：使用animation相关属性控制动画执行过程

7.png

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

3.2属性

8.png

3.3 补间动画和逐帧动画

补间动画:动画执行过程中,没有间隔
使用的速度曲线:默认值为 ease; 匀速 linear
逐帧动画(精灵动画):一步一步执行动画,中间会有间隔
使用速度曲线:steps(正整数)
逐帧动画通常配合精灵图使用,又叫精灵动画
属性:animation-timing-function: steps(N)；

3.4使用animation属性给一个元素添加多个动画效果

9.png

小案例

<title>Document</title>
    <style>
        * {
            margin: 0;
            height: ;
            box-sizing: border-box;
        }
        .box {
            width: 140px;
            height: 140px;
            /* 插入背景图片 */
            background: url(./images/bg.png);
            /* 调用动画 */
            animation: run 1s steps(12) infinite, move 3s forwards linear;
        }

        /* 1.让人物原地跑起来 */
        /* 精灵图全部动作参与动画,往左走图片的宽度 */
        @keyframes run {
            to{
                background-position: -1680px 0;
            }
        }
        /* 2.让盒子往右走700px */
        @keyframes move {
            to{
                transform: translate(700px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>