CSS3学习笔记（5）——transform 的3d变换

在CSS3中，我们可以用一个三维坐标系来表示一个3d空间：

其中，z轴指向的是屏幕向外。

要实现3d的移动、缩放、旋转，也需要用到 transform样式。

三维移动

transform: translate3d(x, y, z);

其中x、y、z分别表示x、y、z方向上的偏移像素值。

也可以分开写：translateX(x)、translateY(y)、translateZ(z)

三维缩放

transform: scale3d(x, y, z);

其中x、y、z分别表示x、y、z方向上的缩放。缩放值与2d的类似，1不缩放，＜1缩小，＞1放大。

也可以分开写：scaleX(x)、scaleY(y)、scaleZ(z)

三维旋转

transform: rotate3d(x, y, z, angle);

这里的x，y，z决定的（x，y，z）其实就是一个向量，相信稍微学过一点数学的人都能理解。

angle代表角度，取正取负有一个很实用的方法：