一、空间转换

1.空间位移:
在平面位移原基础上增加Z轴的位移，Z轴的方向是从后到前（即从电脑屏幕到眼睛的方向），正值更近，负值更远。

2.视距：
（又名透视、景深）；css书写：perspective（pp）：具体像素（一般400px到1200px）；pp给了之后会实现近大远小的效果。pp只是增加了近大远小的效果而已，并不是真正的3D。

3.空间旋转：
css书写:transform:rotateX(Y/Z),可以用左手判断旋转方向，左手握拳伸出大拇指，拇指方向为轴的正负方向，其余手指为旋转方向。3D旋转本质是沿着多条轴（或者边）旋转，一般用作上帝视角。

4.立体呈现：
css书写：transform-style：preserve-3d；使元素处于真正的3d空间。**空间内转换元素子都有自己独立的坐标轴，互不干扰。**

二、动画

1.普通动画：
添加动画的盒子:animation：自定义动画名称 动画时间
@keyframes 自定义动画名称 {
           from {
           }
           to {
           }
                  }
                  
 2.分段动画：
 添加动画的盒子:animation：自定义动画名称 动画时间
 @keyframes  自定义动画名称 {
            0% {
            }
            10% {
            }
            50%{
            }
            100% {
            }
                     }
                     
  3.from和0%如果初始没有变化可以省略不写
  
  4.关于animation其其他可添加的属性：

  5.暂停:
  一般搭配hover使用，css书写：
     类名：hover {
     animation-play-state: paused;
      }
  
  6.逐帧动画（精灵动画）
   属性：steps(填写帧的页数)

tseps和linea同时出现出现时，steps失效，linear生效。

forwards不能和infinite结合使用，否则不生效animation 里面属性值不分先后顺序

当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间

移动web day2

一、空间转换

二、动画