CSS rotate3d 属性行为异常

Question

我正在阅读有关 CSS rotate3d() 属性旋转元素的信息。我以为函数中前三个参数是乘数，第四个是度数。

乘数的值必须介于 0 和 1 之间。这意味着 rotate3d(1, 0, 0, 90deg) 只会产生 rotateX(90deg)。为了获得更大的旋转范围，我将其更改为 rotate3d(0.25, 0, 0, 360deg) 但它会产生完全不同的结果。

我也注意到 transform: rotateX(45deg) rotateY(45deg); 和 transform: rotate3d(1,1,0, 45deg); 不一样。等等如果我们不能简单地改变所需尺寸的乘数来获得所需的旋转，我应该如何计算三个乘数的值？

谢谢。

Answer 1

当使用 rotate3d(x, y, z, a) 时，前 3 个数字是定义旋转矢量的坐标，a 是旋转角度。它们不是旋转的乘数。

rotate3d(1, 0, 0, 90deg) 与 rotate3d(0.25, 0, 0, 90deg) 相同，也与 rotate3d(X, 0, 0, 90deg) 相同，因为我们在所有情况下都具有相同的向量。这也与 rotateX(90deg)

相同

.box {
  margin:30px;
  padding:20px;
  background:red;
  display:inline-block;
}

<div class="box" style="transform:rotate3d(1,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(99,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(0.25,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(100,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(-5,0,0,60deg)"></div>
<div class="box" style="transform:rotateX(60deg)"></div>

由此我们也可以得出，rotate3d(0, Y, 0, a)与rotateY(a)相同，rotate3d(0, 0, Y, a)与rotate(a)相同。注意在两个坐标中使用 0，这将使我们的矢量始终位于同一轴（X 或 Y 或 Z）

rotate3d(1,1,0, 45deg) 与 rotateX(45deg) rotateY(45deg) 不同。第一个将围绕 (1,1,0) 定义的向量执行 one 旋转，第二个将围绕 X 执行 two 连续旋转和Y 轴。

换句话说，rotate3d()不是其他旋转的组合，而是旋转本身。其他旋转是 rotate3d() 考虑预定义轴的特殊情况。

如果你保持相同的角度，乘数技巧适用于坐标。 rotate3d(x, y, z, a) 等同于 rotate3d(p*x, p*y, p*z, a)，因为如果将所有坐标乘以相同的值，则保持相同的矢量方向并且仅更改与定义旋转无关的矢量维度。只有方向是相关的。

此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

您可以清楚地注意到，使用 [-1,1] 范围内的值对 x,y,z 足以定义所有组合。另一方面，x,y,z 的任何组合都可以减少到 [-1,1]

范围内的值

示例：

.box {
  margin:30px;
  padding:20px;
  background:red;
  display:inline-block;
}

<div class="box" style="transform:rotate3d(10,5,-9,60deg)"></div>
<div class="box" style="transform:rotate3d(1,0.5,-0.9,60deg)"></div>

<div class="box" style="transform:rotate3d(25,-5,-8,60deg)"></div>
<div class="box" style="transform:rotate3d(1,-0.2,-0.32,60deg)"></div>

我们简单地除以最大的数。

CSS rotate3d 属性行为异常

CSS rotate3d property behaving unexpectedly

css

css-transforms

CSS rotate3d 属性 行为异常

CSS rotate3d property behaving unexpectedly

css

css-transforms

CSS rotate3d 属性行为异常