空间转换
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间位移
语法
l transform: translate3d(x, y, z);
l transform: translateX(值);
l transform: translateY(值);
l transform: translateZ(值);
l 取值（正负均可）
l 像素单位数值
l 百分比
1.Z轴的正方向为屏幕到人的眼睛的方向
2.transfrom:translateZ()
3.transfrom:translate3d(100px,100px,300px)
透视效果
使用perspective属性实现透视效果
取值：像素单位数值， 数值一般在800 – 1200
作用
Ø 空间转换时，为元素添加近大远小、近实远虚的视觉效果
设置了给使用了3d元素的最近一级的父元素
空间旋转
使用rotate实现元素空间旋转效果
语法
Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);
/* 顺时针旋转 /
/ transform:rotateZ(360deg); /
/ 逆时针旋转 /
/ transform: rotateZ(-360deg); */
注意：（在立体空间中，一个点和一条线是不占位置的，你是看不到的）
/* 属性值与属性值以空格隔开 */
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
立体呈现
使用transform-style: preserve-3d呈现立体图形
实现方法
Ø 添加 transform-style: preserve-3d;
Ø 使子元素处于真正的3d空间
开启3D. tfs和pp作用的对象是一样的
注意：pp仅仅是增加了一个近大远小的效果，并没有真正开启3D模式
动画
使用animation添加动画效果
动画的实现步骤
实现步骤：
-
定义动画
定义动画.png
第二种
定义动画2.png
-
使用动画
调用动画.png
