CSS3添加3D色彩

CSS变形功能包括：

移动（translate）
缩放（scale）
旋转（rotate）
倾斜（skew）

第二部分：坐标系

x轴（横轴）
y轴（纵轴）
z轴（深度轴）

x轴的正值在右侧，负值在左侧。y轴的正值沿纵轴向下，负值沿纵轴向上。回想一下定位元素的top属性：值为正数时元素下移，值为负数时元素上移。

如果想把元素向左下方移动，要把x值设为负数，把y值设为正数：

transform: translateX(-50px) translateY(50px);

在2D变形中只需要关注全周360度坐标系，即由x轴和y轴构成的屏幕。对旋转来说，2D旋转其实是在绕z轴旋转。类似的，如果绕x轴旋转，元素将偏向我们或远离我们，而绕y轴旋转的话，元素将向两侧旋转

平移函数 translate()
平移函数沿一个轴或多个轴移动。

translateX()沿元素自身的x轴移动元素。
translateY()沿元素自身的y轴移动元素。
translateZ()沿元素自身的z轴移动元素。

translateX(200px)  <!--元素向右移动200像素-->
translateY(200px)  <!--元素向下移动200像素-->
translateX(50%)  <!--元素向右移动自身尺寸的一半-->

如果想同时沿x轴和y轴移动，使用 translate()更方便。第一个值代表x轴，第二个值代表y轴。translate()与translateX()，translateY()结合在一起的作用是一样的。

.scale 缩放
scaleX(): 指定X轴的缩放倍数;
scaleY(): 指定Y轴的缩放倍数;
scaleZ(): 指定Z轴的缩放倍数;
scale3D(): 第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一不可;