空间转换(3D转换)

位移

属性transform

两行代码是等价的，第二种是复合写法

transform: translateX(100px) translateY(100px) translateZ(100px);

transform: translate3d(100px,100px,100px)

默认情况下看不见z轴上的变化

立体坐标系

透视-视距

属性：perspective

透视作用：可以实现元素近大远小的效果

  <title>透视效果</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: yellowgreen;
      margin: 50px auto;
      /* 当我们想要看见元素在z轴上的变化的时候，需要给被观察的物体添加视距 perspective*/
      
      transform: translate3d(100px,100px,100px);
    }
    /* 如何去使用
    1.代码规范  要给被观察的物体的父元素使用！
    2.视距，一般随意的设置1000px */
    body {
      perspective: 900px;
    }
  </style>
</head>
<body>
  <div></div>
</body

旋转

开启立体呈现： 添加 transform-style: preserve-3d;

3D旋转： transform: rotate3d(1,1,1,30deg);

左手法则

缩放

3D缩放对空间的立体物体做缩放

2D缩放只能缩放平面图形的宽度和高度

3D缩放可以缩放立体物体的宽度和高度和厚度

scaleX 缩放宽度

scaleY 缩放高度

scaleZ 缩放厚度（前面和后面两个面的距离）

scale3d（1,1,1）同时对长宽高做缩放

动画

原理

就是快速将大量的图片切换形成连续的画面

好处

可以实现多个状态间的变化过程，并且动画的过程是可控的（是否暂停，重复播放，最终画面）

用法如下

1.先定义动画

2.使用动画

3.动画属性

animation: name duration timing-function delay iteration-count direction fill-mode;

注意：

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

补充：

1.动画执行完毕状态：animation-fill-mode：both 等于同时设置了forwards和backwards

2.动画执行方向

normal: 先正再正常用（默认值）
alternate:先正再反常用
reverse :先反再反
alternate-reverse:先反再正

3.速度曲线
animation: timing-function：linea（匀速）
ease-in（先慢后快）
easw-out（先快后慢）

拓展

1.过渡有4个属性

想要实现过渡的CSS属性名：transition-property：width（宽）all（宽高过渡）
过渡持续的时间：transition-duration：(X)s
过渡的速度曲线: transition-timing-function: steps (X)
过渡的延迟时间：transition-delay ：(X)s

复合写法：transition： all 3s steps (4) 5s;

2.如何知道一个CSS属性有没有兼容性问题的？

答：can i use

实用技巧

1.ul是多宽设置位移多宽，400px

2.你想要分几步，写几

3.不要写上forwards

4.加上无限播放

 <title>实用技巧法完成精灵动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    ul {
      position: relative;
      list-style: none;
      width: 400px;
      height: 100px;
      margin: 100px auto;

    }
    ul::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
      /* infinit 无限循环 */
      animation: ani 2s steps(4)  infinite;
    }
      /* 实用技巧
    1.ul是多宽 设置位移多宽，400px
    2.你想要分几步，写几
    3.不要写上forwards
    4.加上无限播放 */

    @keyframes ani {
      100%{
        left: 400px;
      }
    }
    li {
      float: left;
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>
</html>

补充知识

谷歌和edge 浏览器（现在edge内核也是使用谷歌）没有效果，而ie和火狐有效果，谷歌浏览器对于大于大图片的，结合背景效果的时候不稳定，有bug

空间转换(3D转换 ，动画)