CSS 中的 rotate3d（） 函数用于在三维表面上围绕固定轴旋转元素，而不会引起任何变形。结果是 transform（） 数据类型。
在三维空间 （3D） 中，旋转有三个自由度，统称为单轴旋转。该旋转轴由 [x， y， z] 向量定义，并由原点传递。
当向量未归一化时，即其三个坐标的平方和不是 1，则用户代理会在内部对其进行归一化。对于不可归一化的向量，例如空向量，即 [0， 0， 0]，旋转将被忽略，而不会使整个 CSS 属性失效。
可能的值
函数 rotate3d（） 接受四个值，即三个坐标值 （x、y、z） 和一个角度 （a）。
- x：一个数字，表示向量的 x 坐标，表示旋转轴。可以是正数或负数。
- y：一个数字，表示向量的 y 坐标，表示旋转轴。可以是正数或负数。
- z：一个数字，表示向量的 z 坐标，表示旋转轴。可以是正数或负数。
- a：角度，表示旋转的角度。正角使元件顺时针方向旋转;而负角则将其逆时针方向旋转。
语法
函数 rotate3d（） 由三个 <number> 和一个 <angle> 指定。向量的三个坐标 （x、y、z） 表示旋转轴，用 <number> 表示。<angle>表示当正向向旋转元素沿斜方向旋转时，当负方向逆时针旋转元素时，旋转角度。
transform: rotate3d(x, y, z, a);
CSS rotate3d（） - 正值和负值
以下是 rotate3d（） 函数的示例，其中有各种值作为参数，有正值和负值：
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 1em;
}
.rotate-all-positive {
background-color: lightgreen;
transform: rotate3d(2, 1, 1, 45deg);
}
.rotate-all-negative {
background-color: tomato;
transform: rotate3d(-2, -1, -1, 45deg);
}
.rotate-mixed {
background-color: cyan;
transform: rotate3d(1,-2, 1, -60deg);
}
</style>
</head>
<body>
<div>No function</div>
<div class="rotate-all-positive">
rotate3d(2,1,1,45deg)
</div>
<div class="rotate-all-negative">
rotate3d(-2,-1,-1,45deg)
</div>
<div class="rotate-mixed">
rotate3d(1,-2,-1,-60deg)
</div>
</body>
</html>
CSS rotate3d（） - 在所有轴上单独旋转
以下是 rotate3d（） 函数的示例，分别显示了各个轴 （x、y、z） 上的旋转：
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: peachpuff;
margin-bottom: 1em;
}
.rotate-x-axis {
background-color: lightgreen;
transform: rotate3d(1, 0, 0, 45deg);
}
.rotate-y-axis {
background-color: tomato;
transform: rotate3d(0, 1, 0, 45deg);
}
.rotate-z-axis {
background-color: lightblue;
transform: rotate3d(0, 0, 1, 45deg);
}
</style>
</head>
<body>
<div>No function</div>
<div class="rotate-x-axis">
rotate3d(1,0,0,45deg)
</div>
<div class="rotate-y-axis">
rotate3d(0,1,0,45deg)
</div>
<div class="rotate-z-axis">
rotate3d(0,0,1,45deg)
</div>
</body>
</html>
