空间转换

使用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添加动画效果

实现步骤：

调用动画2.png