空间转换（3D转换）：使用transform属性🔥

  1. 实现元素在立体空间内的位移、旋转、缩放等效果
  2. 立体空间坐标：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。**
  3. 🌈X轴方向—————正向—-向右———取值为正值； 反相为负值
  4. 🌈Y轴方向—————正向—-向下———取值为正值； 反相为负值

  5. 🌈Z轴方向—————正向—-向右屏幕向外———取值为正值； 反相为负值

    空间位移

    🌈transform:translate3d(x,y,z);

    若设置一个方向的位移值，选择单写：

    transform:translateX(值);

    transform:translateY(值);

    transform:translateZ(值);

    默认情况下，Z轴位移效果无法观察到
    Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面Z=0，默认无法观察远近效果
    取值（正负均可）
    1.像素单位数值xxpx； 2.百分比；

    perspective属性 实现透视效果属性

    效果近大远小、近清楚远模糊 ；人与平面Z=0之间的视距
    属性（添加给父级） perspective: 值;
    取值：像素单位数值， 数值一般在400 – 1200
    无法产生3D效果
    透视.png

    空间旋转

    🌈transform : rotate3d();

    左手法则：确认旋转方向

  6. 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
    快捷键：rox,roy,roz
    设置某一方向可分开写，若各个反向都有，分开写，否则下面的会覆盖上面的旋转
    连写：transform: rotateX() rotateY() rotateZ();
    transform: rotate3d(1,1,1,xxdeg);
    拓展

    1. rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
    2. x，y，z 取值为0-1之间的数字； 1代表沿着这条轴转，0代表不沿着这条轴转

空间转换 动画 - 图2

开启3D空间

transform-style: preserve-3d；

呈现3D立体空间
快捷键：tfs

💥注意点：写给父元素，让子元素处于真正的3D空间内

例子：
🌈🌈🌈 注意：空间内，转换元素都有自己独立的坐标轴，互不干扰
旋转角度后，坐标轴会变化
立方体写法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.         content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  7.     <title>立方体.html</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         ul {
  15.             width: 200px;
  16.             height: 200px;
  17.             background-color: aqua;
  18.             margin: 200px auto;
  19.             position: relative;
  20.             /* 开启3D */
  21.             transform-style: preserve-3d;
  22.             /* 旋转展示 */
  23.             transform: rotate3d(1, 1, 1, 30deg);
  24.         }
  25.         li {
  26.             list-style: none;
  27.             position: absolute;
  28.             left: 0;
  29.             top: 0;
  30.             width: 100%;
  31.             height: 100%;
  32.             text-align: center;
  33.             line-height: 200px;
  34.         }
  35.         /* 平移旋转 */
  36.         /* 1--前后Z轴平移宽度一半(方向相反) 正向为正值 反向为负值  transform:translateZ(100px); */
  37.         /* 2--左右X轴平移宽度一半(方向相反)
  38.              Y轴方向旋转90deg  transform:translateX(100px) rotateY(90deg); */
  39.         /* 3--上下Y轴平移宽度一半(方向相反)  X轴方向旋转90deg
  40.                 transform:translateY(100px) rotateX(90deg) */
  41.         .front {
  42.             background-color: rgba(205, 25, 250, .5);
  43.             transform: translateZ(100px);
  44.         }
  45.         .back {
  46.             background-color: peachpuff;
  47.             transform: translateZ(-100px);
  48.         }
  49.         .left {
  50.             background-color: paleturquoise;
  51.             transform: translateX(-100px) rotateY(90deg);
  52.         }
  53.         .right {
  54.             background-color: salmon;
  55.             transform: translateX(100px) rotateY(90deg);
  56.         }
  57.         .top {
  58.             background-color: yellowgreen;
  59.             transform: translateY(-100px) rotateX(90deg);
  60.         }
  62.         .bottom {
  63.             background-color: deepskyblue;
  64.             transform: translateY(100px) rotateX(90deg);
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <!-- 一个盒子包含六个面 -->
  70.     <ul class="box">
  71.         <li class="front">前面</li>
  72.         <li class="back">后面</li>
  73.         <li class="left">左面</li>
  74.         <li class="right">右面</li>
  75.         <li class="top">上面</li>
  76.         <li class="bottom">下面</li>
  77.     </ul>
  78. </body>
  79. </html>

3D导航分析：
1.分析3个盒子—-一个立方体盒子3D（开启3d在前在后都可以）
2.png
两个盒子并列——————-橘色定位覆盖—————橘色旋转———————橘色位移—————-绿盒子往前位移
代码：
G.png

空间缩放

scale属性：

  1. transform: scaleX(倍数); 盒子宽度缩放倍数
  2. transform: scaleY(倍数); 盒子度高度缩放倍数
  3. transform: scaleZ(倍数); 平面控制厚度没有意义，3D可以

  4. transform: scale3d(x, y, z);

    动画: animation属性

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

    animation属性控制动画执行过程

    @keyframes 定义动画名称

    🌈搭配 from {} to{} 和 百分比 来实现动画效果

    步骤1：                                                 步骤1：
@keyframes 定义动画名称 {                                @keyframes 定义动画名称 {
    from {}                                                 0% {}
    to {}                                                   ...  0-100值间任意设置
}                                                           100%{}
                                                            }
                                    步骤2：谁动就给谁加
                            animation: 动画名称  动画花费时长；
                        animation相关属性搭配很多，根据需求使用

    from to 只能定义两种状态的变化
    百分比写法可以完全自定义多个写法
    from=0% 在运动初始状态和原始设置状态一样的情况下，省略不写
    to=100% 必须写
    搭配简单的写法：animation: 动画名称 动画花费时长；

  5. ✌走马灯示例：（重点看编码步骤）🎃 

    <!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>走马灯.html</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box {
        width: 620px;
        height: 130px;
        margin: 100px auto;
        overflow: hidden;
    }
    .inear {
        width: 2090px;
        height: 130px;

        animation: mov 4s infinite linear;
    }
    img {
        width: 209px;
        float: left;
    }
    @keyframes mov {
        100% {
            transform: translateX(-1463px);
        }
    }
</style>
</head>
<body>
<!-- 走马灯步骤：1.大盒子包小盒子（显示的画面）
               2. 将图片放入小盒子中，后面添加画面显示的图片，加3张。
                  因为播放方向是从前往后，前后一致才能保持无缝播放 -->
<div class="box">
    <div class="inear">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
        <img src="./img/6.jpg" alt="">
        <img src="./img/7.jpg" alt="">

        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
    </div>
</div>
</body>
</html>

    另一种 原理同样
    走马灯.png

animation相关属性

属性an01.png
空间转换 动画 - 图7

animation属性解读：

空间转换 动画 - 图8
🎃🎃🎃特别补充：

速度曲线

animation-timing-function：可分为：

  1. 匀速 linear

  2. 跳帧 steps

           补间动画，每帧之间有过渡效果<br />              逐帧动画==精灵动画  steps(数字)，帧动画。<br />开发中，一般配合精灵图实现动画效果。<br />animation-timing-function: steps(N)； 将动画过程等分成N份  ，steps(1)就是一帧。<br />🌈🔥🌈注意：

  3. 动画名称和动画时长必须赋值

  4. 取值不分先后顺序

  5. 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
    代码示例：
    精灵人跑步： 

    <!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>精灵人.html</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    div {
        width: 140px;
        height: 140px;
     🌈背景精灵图   
        background-image: url(http://md.zbztb.cn/uploads/969830496351/bg.png);
        margin: 200px auto;
        🌈   精灵动画  steps(数字)，帧动画
        animation: mov 1s steps(12) infinite;
    }
    @keyframes mov {
        100% {
        🌈背景定位   左移动
            background-position: -1680px;
        }
    }
</style>
</head>
<body>
<div></div>
</body>
</html>

    🏆动画链接：
    CSS动画网站 常用： https://animate.style
    http://ianlunn.github.io/Hover/
    扩展：https://codepen.io/ajerez/pen/EaEEOW/
    动画示例：https://ad.weixin.qq.com/

    重复次数

    animation-iteration-count: 数值次数 或者 infinite无限;

    运动方向

    animation-direction: alternate; 来回反复

    播放状态

    animation-play-state: paused ; 暂停
    animation-play-state: running ; 运行 默认

    一个元素添加多个动画效果

    animation属性给连写方式：逗号隔开

    空间转换 动画 - 图9

    提问：

    对HTML语义化的理解

    1、用正确的标签做正确的事情
    2、HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
    3、即使在没有样式CSS情况下也以一种文档格式显示，并且是易于阅读的
    4、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
    5、使阅读源代码的人更容易将网站分块，便于阅读维护理解

    HTML5新特性

  6. 语义化标签: header nav section article aside footer

  7. 多媒体标签: video audio
  8. input类型: number search email tel date file time url
  9. 本地离线存储 localStorage 长期存储数据,改变浏览器数据不会丢失
    sessionStorage 浏览器关闭数据会丢失
  10. 自定义属性 data-*
  11. 画布 Canvas
  12. WebSocket 双向通信协议