我正在阅读有关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);
不同。等等。如果我们不能简单地更改所需尺寸的乘数以获得所需的旋转,我应该如何计算三个乘数的值?
谢谢。
[使用rotate3d(x, y, z, a)
时,前三个数字是定义旋转矢量的坐标,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和Y轴执行two连续旋转。
换句话说,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>
我们简单地除以最大数。