【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

在 CSS3 中，我们可以使用 rotate3d 函数来创建 3D 旋转效果。rotate3d 函数允许你定义一个3D旋转效果，其中每个参数代表的意思如下：

1. x - 定义旋转的方式，1 表示沿 x 轴旋转，0 则不旋转。
2. y - 定义旋转的方式，1 表示沿 y 轴旋转，0 则不旋转。
3. z - 定义旋转的方式，1 表示沿 z 轴旋转，0 则不旋转。
4. angle - 定义旋转的角度，单位可以是度(deg)或者弧度(rad)。

下面是一些使用 rotate3d 函数的示例：

1. 沿着 x 轴旋转：

div {
  transform: rotate3d(1, 0, 0, 45deg);
}

2. 沿着 y 轴旋转：

div {
  transform: rotate3d(0, 1, 0, 45deg);
}

3. 沿着 z 轴旋转：

div {
  transform: rotate3d(0, 0, 1, 45deg);
}

4. 自定义旋转（例如，沿着 x 轴和 y 轴同时旋转）：

div {
  transform: rotate3d(1, 1, 0, 45deg);
}

5. 自定义旋转（例如，不沿任何轴旋转）：

div {
  transform: rotate3d(0, 0, 0, 45deg);
}

注意：rotate3d 函数中的前三个值被看作是 0 和 1 之间的数字，这些数字的乘积如果是零，则不会发生旋转。如果你想要的效果是沿着某个轴旋转，可以将其他轴的值设置为0，并将想要旋转的轴的值设置为1。如果你想要两个或更多的轴同时旋转，可以将它们的值都设置为1。