空间转换
动画

空间转换-transform

作用：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间位移

作用：使用translate实现元素空间位移效果

语法： transform: translate3d(x, y, z); l transform: translateX(值); l transform: translateY(值); l transform: translateZ(值);

<style>
        div{
            margin: 100px auto; 
            width: 200px;
            height: 200px;
            background-color: #baf;
            transform: translateZ(300px);
        }
    </style>
<body>
    <div></div>
</body>

透视

作用: 实现透视效果，近大远小

语法:perspective(给父级添加)一般取值为：800-1200

<style>
        body{
            /* 近大远小 */
            perspective: 1000px;
        }
        div{
            margin: 100px auto; 
            width: 200px;
            height: 200px;
            background-color: #baf;
            transform: translateZ(300px);
        }
    </style>
<body>
    <div></div>
</body>

空间旋转

作用：实现元素空间旋转效果（左手法则）

左手法则判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

语法： rotate3d(x, y, z, 角度度数) ； transform: rotateZ(值); transform: rotateX(值); transform: rotateY(值);

注意：rotate3d(x, y, z, 角度度数) ， x，y，z 取值为0-1之间的数字

<style>
        body {
            perspective:1000px
        }
        img{
            transform: rotateX(0deg);
            transition: 2s;
        }
        img:hover{
            transform: rotateX(360deg);
        }
    </style>
    <div>
        <img src="./images/pk1.png" alt="">
    </div>

立体呈现

作用：呈现立体图形 ( 盒子父元素添加t)

语法： transform-style: preserve-3d

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-立方体.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .box {
        width: 200px;
        height: 200px;
        position: relative;
        margin: 100px auto;
        transform-style: preserve-3d;
        transform:rotate3d(1, 1, 1, 60deg)

      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;    
      }

      .front {
        background-color: salmon;
        transform: translateZ(100px);

      }
      .back {
       
        background-color: seagreen;
        transform: translateZ(-100px);
      }
      .left {
        background-color: lawngreen;
        transform: translateX(-100px) rotateY(-90deg);
      }
      .right {
        background-color: yellow;
        transform: translateX(100px) rotateY(90deg);
      }
      .up {
        background-color: aqua;
        transform: translateY(-100px) rotateX(90deg);
      }
      .bottom {
        background-color: purple;
        transform: translateY(100px) rotateX(-90deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="front">前</div>
      <div class="back">后</div>
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="up">上</div>
      <div class="bottom">下</div>
    </div>
  </body>
</html>
<!-- 
  1 静态结构
    1 定一个父盒子 box 包装着6个小 平面 （立方体 有6个面）
    2 写6个面 
      1 先使用定位 来重叠在一起 （方便后面一个一个的调整他们的位置 构造立方体 ）

  2 使用 空间变换来实现 立方体！！ 
    1 前： z轴 正 移动   +100
    2 后： z轴 负 移动   -100  

  3 提前检查一下 有效果
    1 给box 开启立体空间效果-立体呈现 3d呈现  
    2 给box 旋转 

 -->

空间缩放

作用：实现空间缩放效果

语法：

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

动画

定义动画

作用：添加动画效果

语法：

<style>
        div{
            margin: 200px auto;
            width: 200px;
            height: 200px;
            background-color: #abc;
            animation: duolaAmeng 5s;
        }
     /* 两种表示方法 */
        /* @keyframes duolaAmeng{
            0%{background-color: #baf;}
            20%{background-color: #baa;}
            50%{background-color: #bfa;}
            100%{background-color: #ccc;}
        } */
        @keyframes duolaAmeng{
            from{
                background-color: #baf;
            }
            to{
                background-color: #bfa;
                border-radius: 30%;
            }
        }
    </style>
<body>
    <div></div>
</body>

使用动画

作用：控制动画执行过程

语法：

<style>
        div{
            margin: 200px auto;
            width: 200px;
            height: 200px;
            background-color: #abc;
            animation: duolaAmeng 5s;

            /* 延迟时间 */
            /* animation-delay:5s; */
            
            /* 动画执行前状态 */
            /* animation-fill-mode:backwards; */

            /* 动画执行完毕后状态 */
            /* animation-fill-mode: forwards; */

            /* 动画执行前以及完毕后同时设置 */
            /* animation-fill-mode: both; */

            /* 设置动画播放次数,后面加数字，inherit是指无限次 */
            animation-iteration-count: infinite;

            /* 
            设置动画播放方向 
            1先正再正 normal   常用  默认值
            2       先正后反 alternate 常用
            3       先反后反  reverse
            4       先反后正  alternate-reverse
            */
            animation-direction:alternate-reverse;
        }

        div:hover{
            /* 
            播放：running  默认值
            暂停：paused
             */
            animation-play-state:paused;
        }
        @keyframes duolaAmeng{
            from{
                background-color: #baf;
                margin-left: 0;
            }
            to{
                background-color: #bfa;
                border-radius: 30%;
                margin-left: 1000px;
            }
        }
    </style>
<body>
    <div></div>
</body>

速度曲线(一般配合精灵图实现动画效果 )

语法： animation-timing-function: steps(N)；

<style>
        div{
            width: 140px;
            height: 140px;
            background-image: url(./images/bg.png);
            animation: ani 1s steps(12) infinite, ani2 4s linear forwards;
        }
        @keyframes ani{
            100%{
                background-position-x: -1680px;
            }
        }
        @keyframes ani2{
            100%{
                transform: translateX(1000px);
            }
        }
    </style>
<body>
    <div></div>
</body>

移动web第二天