CSS turn3d属性行为异常 [英] CSS rotate3d property behaving unexpectedly
问题描述
我正在阅读有关CSS Rotate3d（）属性以旋转元素的信息。我以为函数中的前三个参数是乘数，第四个参数是度数。
乘数的值必须在0到1之间。这意味着 rotate3d（1，0，0，90deg）只会导致rotateX（90deg）。为了获得更大的旋转范围，我将其更改为 rotate3d（0.25，0，0，360deg），但产生的结果却完全不同。
我还注意到， transform：rotateX（45deg）rotationY（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;内边距：20px;背景：红色； 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>
p>
由此我们还可以得出结论， rotate3d（0，Y，0，a）与<$ c相同$ c> rotateY（a）和 rotate3d（0，0，Y，a）与 rotate（a ）。注意在两个坐标中使用 0 会使我们的矢量始终在同一轴上（X或Y或Z）
rotate3d（1,1,0，45deg）与不同rotationX（45deg）rotationY（45deg）。第一个将围绕（1,1,0）定义的向量执行一个旋转，第二个将执行两个围绕X和Y轴连续旋转。
换句话说， rotate3d（）并不是其他旋转的组合，而是一个旋转的组合。其他旋转是考虑预定义轴的 rotate3d（）的特殊情况。
如果保持相同的角度，则乘数技巧将应用于坐标。 rotate3d（x，y，z，a）等效于 rotate3d（p * x，p * y，p * z，a），因为如果将所有坐标乘以相同的值，则将保持相同的向量方向，并且仅更改了在定义旋转时不相关的向量尺寸。
此处有更多详细信息： https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotate3d
您可以清楚地注意到，对于 x，y，z <，使用 [-1,1] 范围内的值/ code>足以定义所有组合。另一方面， x，y，z 的任何组合都可以减小为 [-1,1]
示例：
.box {margin：30px;内边距：20px;背景：红色； 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>
我们只需除以最大数即可。
I was reading about the CSS rotate3d() property to rotate an element. I thought that the first three parameters in the function are multipliers and the fourth one is the degree magnitude.
The value of multipliers has to be between 0 and 1. This means that rotate3d(1, 0, 0, 90deg) will only result in rotateX(90deg). To get more range of rotations I changed it to rotate3d(0.25, 0, 0, 360deg) but it produces entirely different result.
I also noticed that transform: rotateX(45deg) rotateY(45deg); is not the same as transform: rotate3d(1,1,0, 45deg);. etc. If we cannot simply change the multiplier of required dimensions to get desired rotations, how should I calculate the value of three multipliers?
Thanks.
When using rotate3d(x, y, z, a) the first 3 numbers are coordinate that will define the vector of the rotation and a is the angle of rotation. They are not multiplier of the rotation.
rotate3d(1, 0, 0, 90deg) is the same as rotate3d(0.25, 0, 0, 90deg) and also the same as rotate3d(X, 0, 0, 90deg) because we will have the same vector in all the cases. Which is also the same as 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>
From this we can also conclude that rotate3d(0, Y, 0, a) is the same as rotateY(a) and rotate3d(0, 0, Y, a) the same as rotate(a). Note the use of 0 in two of the coordinates which will make our vector always in the same axis (X or Y or Z)
rotate3d(1,1,0, 45deg) is not the same as rotateX(45deg) rotateY(45deg). The first one will perform one rotation around the vector defined by (1,1,0) and the second one will perform two consecutive rotation around the X and Y axis.
In other words, rotate3d() is not a combination of the other rotation but a rotation on its own. The other rotation are particular cases of rotate3d() considering predefined axis.
The multiplier trick apply to the coordinate if you keep the same angle. rotate3d(x, y, z, a) is equivalent to rotate3d(p*x, p*y, p*z, a) because if you multiply all the coordinates with the same value, you keep the same vector direction and you change only the vector dimension which is irrelevant when defining the rotation. Only the direction is relevant.
More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
You can clearly notice that using values in the range of [-1,1] for x,y,z is enough to define all the combination. In the other hand, any combination of x,y,z can be reduced to values inside the range [-1,1]
Examples:
.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>
We simply divide by the biggest number.
这篇关于CSS turn3d属性行为异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
