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

空间转换

一：空间位移

空间转换也称为3d转换，跟平面转换的区别是多了一条Z轴，网页默认显示方式是2D的，是看不到3D的效果，Z轴正方向是屏幕到人眼的方向，原点为X、Y轴交点.
语法：
transform：translateZ (100px) ----- 向人眼方向移动100像素
transform：translateZ (-100px) ----- 往屏幕內方向移动100像素
3d写法：transform：translate(x,y,z)
（取值也可以是百分比，参考子元素自身的宽高）
注意：直接用此代码是看不到效果的，此时需要给父级元素添加一个透视属性才能看到效果。

透视perspective

用perspective属性可以在Z轴方向上建立一个可视范围，让设置了该属性的子元素拥有一个透视的效果，让元素的Z轴方向上的变化呈现：近大远小。
属性必须添加给父级元素，取值：px，建议取值800px-1200px之间（该区间的取值比较符合人眼习惯）
理解：在取值的地方设置了一个眼睛去看这个屏幕，所以perspective也可以理解为视距。
特殊情况：如果Z的取值比视距大，意思是物体跑到“眼睛”后面去了，此时hover的时候超出视距的瞬间hover效果会消失。
代码以及效果图：

透视

二：空间旋转-----X-Y-Z轴旋转

左手定则

左手大拇指方向指向轴的正方形，四指方向闭合的方向为旋转的正方形，反之则为旋转的负方向
语法：
transform：rotateX(-60deg)
transform：rotateY(60deg)
transform：rotateZ(-60deg)
以上代码一般都配合hover使用，不过工作中一般很少用到。
代码以及效果图如下：

X轴

Y轴

Z轴

如果想让元素沿着多个轴方向旋转，可用以下写法：
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
代码以及效果图：

多条轴方向旋转

立体呈现

透视只是增加了一个近大远小的效果，并没有让元素真正处于一个3D环境中，如果想让元素处于一个3D空间中，则需要给父级元素添加transform-style：preserve-3d;
代码以及效果图如下：

3D呈现

案例：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>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }
      li {
        float: left;
        height: 40px;
        list-style: none;
        transition: 0.5s;
        /* 开启 3D */
        transform-style: preserve-3d;
        /* 开启上帝视角，通过旋转(ps) */
        /* transform: rotateX(-20deg) rotateY(30deg); */
      }
      a {
        display: block;
        width: 100px;
        height: 40px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
      li a:first-child {
        background-color: green;
        /* 往Z轴正方向移动20px */
        transform: translateZ(20px);
      }
      li a:last-child {
        background-color: orange;
        /* 向上平移60px,往页面里面沿着X轴正方向旋转90deg */
        transform: translateY(-60px) rotateX(90deg);
      }
      li:hover {
        /* 沿着X轴负方向旋转90deg */
        transform: rotateX(-90deg);
      }
    </style>
  </head>
  <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>
</html>

效果图：

3D导航

现在工作环境不流行3D导航效果

动画

动画跟hover差不多,都是为了实现网页动态效果,但是动画不用鼠标hover上去就能实现动态效果。

想让一个网页实现动画效果，必须要设置两个步骤：1.定义动画，2.调用动画

1.定义动画：

定义动画有两种方式，一种是直接通过from跟to来实现，另一种是通过百分比实现
语法：@keyframs 动画名
第一种：from跟to

    @keyframes change {

      /* 初始状态 */
      /* 如果调用该动画的盒子样式跟动画的初始状态是一致的，那初始状态可以省略不写 */
      /* from {
        width: 200px;
      } */

      /* 结束状态 */
      to {
        width: 600px;
      }
    }

第二种：百分比，让动画拥有多个状态，百分比指的就是动画执行过程中的某一点。百分比可以实现阶段性的动画效果

    @keyframes move {
      /* 0% {
        width: 200px;
        height: 100px;
      } */

      50% {
        width: 500px;
        height: 300px;
        background-color: pink;
      }

      100% {
        width: 800px;
        height: 500px;
        background-color: yellow;
        border-radius: 250px;
        border: 10px solid #000;
      }
    }

2.调用动画

定义完动画之后，需要调用动画，谁用动画给谁加
调用动画语法：animation: 动画名动画时长;

animation: change 2s;

使用动画的注意点：
1.动画名不能重复
2.可以参与CSS过渡的属性都可以参与动画
3.动画名不能定义为running，它是关键词。

动画的复合属性

      animation-name: move;
      animation-duration: 3s;
      animation-delay: 3s;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
      animation-direction: alternate;

以上代码太臃肿，可以使用动画的复合属性简化

animation: move 3s linear 3s infinite alternate;

复合属性的注意点：

延迟时间：动画执行开始之前要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间

暂停动画：animation-play-state: paused;
谁用暂停给谁加，一般跟hover配合使用

    .box:hover {
      animation-play-state: paused;
    }

补时动画：
特点：没有间隔，播放很平滑
使用的速度曲线：默认ease，匀速曲线为linear

逐帧动画：
特点：一步一步去执行，中间会有间隔
使用的速度曲线：steps(正整数)，正整数多少就代表执行多少个步骤
逐帧动画又名精灵动画，经常配合精灵图使用

案例：精灵图动画

代码：

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 140px;
            height: 140px;
            /* 插图背景图 */
            background: url(./images/bg.png);

            /* 调用动画 */
            /* 调用多个动画，动画与动画之间用英文逗号隔开 */
            animation: run 1s steps(12) infinite, move 2s linear forwards;
        }

        /* 1.先让人物跑起来 */
        /* 精灵图全部动作都参与动画，往左走图片的宽度 */
        @keyframes run {
            to {
                background-position: -1680px 0;
            }
        }

        /* 2.让盒子向右平移700px */
        @keyframes move {
            to {
                transform: translate(700px);
            }
        }
    </style>
</head>

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

</html>