空间转换

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

（1）空间位移

书写方式

1.tansfortm：translate3d(x, y, z);（X,Y,Z也可以各自分开来写）
2.数值+px 百分比

（2）空间转移

书写方式

1.tansfortm：rotate(x, y, z);（X,Y,Z也可以各自分开来写）
2.数值+deg

特点

可以使用左手法测，通过手握转动轴，拇指竖起对正向轴，握紧拳头通过紧握的手指方向，判定在3d效果中的旋转方向。

（3）空间缩放

书写方式

transform: scale3d(x, y, z);（也可单独写，一般只需要设定一个数值就够了）

特点

1.和2d缩放效果基本一致，并且可以通过上面空间位移的tansfortm：translateZ(数值+px/百分比)来实现相似的效果

（4）空间样式

书写方式

1.transform-style: preserve-3d

特点

1.通过添加给亲父级，给亲子级建立3D的空间。
2.空间内，转换元素都有自已独立的坐标轴，互不干扰

空间转换-透视

书写方式

1.perspective:数值+px

特点

1.通过给亲父级元素添加，给物体施加近大远小的视觉效果，但是不能当成是3d，真正的3d需要通过（transform-style: preserve-3d）一起添加给亲父级，才能给亲子级3D的空间效果。
2.初始简写为pp，可通过数值+px的方式给屏幕前设计一个眼睛距离，一般设置800-1200以内的数值。

动画

书写方法：

1.先通过@keyframes 动画名称 {from { }

to { }
或者
@keyframes 动画名称 {百分比 { }
百分比 { }
100% { }
}（）

2.在通过在需要动画的元素上添加animation：动画名称 动画时长，添加动画效果，如下图

动画效果.png

特点

1.animation：动画名称 动画时长：（这两个基础属性必填）
2.如果初始数值不需要调整的话可以不填from。
3.取值不分先后顺序（除了动画时长和延迟，如果同时存在两个时间数值，第一个必定是动画时长，第二个必定是延迟）

动画属性animation不为复合属性一种写法，如下图

animation单独写法公式，作用和取值.png

逐帧动画steps

书写方法：animation：steps（数值）

特点：

1.需要多少部分完成就填写多少部分的数值。
2.一般是配合精灵图使用，精灵图通过定位去区分一共需要几部分，然后通过bgi-position定位去把所需要的部分进行平移。在通过animation：steps去实现逐帧显示形成的动画效果。

如下图

人物跑步图.png

代码

人物跑步代码.png