1.三维坐标轴
    三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的

    • x轴：水平向右 注意：x右边是正直，左边是负值
    • y轴：垂直向下 注意：y下面是正直，上面是负值
    • z轴：屏幕垂直 注意：往外面是正直，往里面是负值

    image.png
    2. 3D移动 translate3d
    3D移动在2D移动的基础上多加了一个可以移动的方向，就是Z轴方向。

    • translform:translateX(100px)∶仅仅是在x轴上移动
    • translform:translateY(100px):仅仅是在Y轴上移动
    • transIform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位
    • transform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离

    3. 透视 perspective
    在2D平面产生近大远小视觉立 体，但只是效果二维的

    • 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
    • 模拟人类的视觉位置，可认为安排一只眼睛去看
    • 透视我们也称之为视距：视距就是人的眼睛到屏幕的距离
    • 距离视觉点越近的在电脑平面成像越大，越远成像越小
    • 透视单位是像素

    透视写在被观察元素的父盒子上面
    d:就是视距，视距就是一个距离人的眼睛到屏幕的距离
    z:就是z轴，物体具屏幕的距离，z轴越大（正值）我们看到的物体就越大
    4. 3D旋转rotate3d
    3D旋转就是可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
    语法：

    • transform:rotateX(45deg):沿着x轴方正方向旋转45度（正躺负爬）
    • transform:ratateY(45deg):沿着y轴正方向旋转45deg（左手法则）
    • transform:ratateZ(45deg):沿着z轴正方向旋转45deg
    • transform:totate3d(x,y,z):沿着自定义轴旋转

    5. 3D呈现 transform-style

    • 控制了子元素是否开启三维立体环境。。
    • transform-style：flat子元素不开启3D立体空间 （默认）
    • transform-style：preserve-3d;子元素开启立体空间
    • 代码写给父级影响的是子盒子
    • ！import

    animation-play-state:paused;
    animation-play-state 属性规定动画正在运行还是暂停。
    注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。