随着网页设计的不断发展，越来越多的3D动画效果被加入到网页中，其中CSS3的旋转效果非常常见。在CSS3中，旋转的属性主要是 transform 中的 rotate()函数，也就是指定某个元素进行旋转的角度。但是，rotate()方法有一个限制，就是只能进行二维旋转。

随着3D动画需求的不断增加，CSS3也推出了更为强大的 rotate3d 属性。其实，rotate3d 方法与 rotate 方法本质是一样的，只是在旋转方向的指定上更加灵活，可实现更多样化的旋转效果。

今天我们就来深度解读一下 rotate3d 属性，在掌握这个旋转神器的同时，轻松应对3D动画。

一、rotate3d 的概念

rotate3d() 的用法是：rotate3d(x,y,z,angle)。其中（x,y,z）表示一个向量，指定了旋转轴的方向，而angle表示旋转的角度。

那么最常用的旋转轴是哪些呢？在CSS3中，旋转轴有X轴、Y轴、Z轴和自定义轴四种，我们来一一介绍。

1、X轴

X轴是关于x轴正方向进行的旋转，对于给定的角度α，笛卡尔坐标系中的变换矩阵为：

cosα -sinα 0 0

sinα cosα 0 0

0 0 1 0

0 0 0 1

在代码中，使用 rotate3d(1,0,0,angle)就可以代表绕X轴旋转，其中 angle 表示旋转的角度值。

2、Y轴

Y轴是关于y轴正方向进行的旋转，对于给定的角度α，笛卡尔坐标系中的变换矩阵为：

cosα 0 sinα 0

0 1 0 0

-sinα 0 cosα 0

0 0 0 1

在代码中，使用 rotate3d(0,1,0,angle)就可以代表绕Y轴旋转，其中 angle 表示旋转的角度值。

3、Z轴

Z轴是关于z轴正方向进行的旋转，对于给定的角度α，笛卡尔坐标系中的变换矩阵为：

1 0 0 0

0 cosα -sinα 0

0 sinα cosα 0

0 0 0 1

在代码中，使用 rotate3d(0,0,1,angle)就可以代表绕Z轴旋转，其中 angle 表示旋转的角度值。

4、自定义轴

在3D动画中，有时需要沿着任意轴进行旋转，这时需要自定义旋转向量，即通过指定向量(x,y,z)来确定旋转方向。

变换矩阵的计算公式为：

a b c 0

d e f 0

g h i 0

0 0 0 1

在代码中，使用 rotate3d(a,b,c,angle) 就可以代表绕自定义轴旋转，其中 angle 表示旋转的角度值。

二、rotate3d 的语法

CSS rotate3d 属性需要四个值，分别为x、y、z和angle，其中x、y、z用来指定旋转的轴的方向，而angle 则表示旋转的角度，语法如下：

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

其中，z坐标的取值可以为负数，这时旋转轴方向会反向，旋转方向也会相反。angle 的取值为 0-360° 之间的任意正整数。

三、rotate3d 的应用

1、画3D立方体

我们来练习一下使用 rotate3d 创建一个3D立方体效果。

```html