空间转换
3D属性
transform：属性实现元素在空间内的位移、旋转、缩放。
translate实现元素空间位移效果：
transform: translate3d(x, y, z);
l transform: translateX(正负像素或百分比);
l transform: translateY(正负像素或百分比);
l transform: translateZ(正负像素或百分比);
透视
perspective：属性实现透视效果、添加给父级 （数值一般800px~1200px）。
作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
rotate：实现元素空间旋转效果
左手法则去： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
transform: rotateZ(deg角度);
transform: rotateX(deg角度);
transform: rotateY(*deg角度)
3D立体呈现
transform-style: preserve-3d：呈现立体图形，
使子元素处于真正的3d空间 ，添加给父级 。
动画
定义动画
@keyframes {dh（自定义动画名）}
@keyframes run {
（开始）from或 0%{
}
（结束） to或100% {
}
}
调用动画
animation:添加动画效果,调用动画到要使用的盒子
animation:动画名称 动画时长（必写属性） 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
属性：
.box {
position: absolute;
left: 0;
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite,
translate 3s linear forwards;
}
@keyframes run {
100% {
background-position: -1680px 0;
}
}
@keyframes translate {
100% {
left: 600px;
}
}
<div class="box"></div>
steps实现逐帧动
animation-timing-function:steps(数字)：逐帧动画
