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>