Css 计算元素'；对其应用多个旋转时的s角度

如果你做旋转（180度）旋转（180度），它现在是颠倒的。因此，如果将鼠标设置为在拖动时向上移动子元素，则该子元素现在将向下移动（取决于设置的方式）

仅用于WEBKIT的设置

看一看（代码是一团乱，剥去了）。在电脑显示器上画360个tic标记，排列成一个圆圈。你怎么知道箭头指向的是什么样的tic标记（假设长方体位于圆的精确中心）

介绍基础知识的教程是

---

*编辑-使用的变换原点位于立方体的中心

注意：下面的所有内容都假定您使用的是一个穿过原点的向量，如中所示。在原始示例中，向量与原点的偏移量为向量

[0,0,60]

。这使计算稍微复杂一些，所以我在解释中使用了简化版本

您的矢量当前由球坐标Euler angles定义，该球坐标连续应用于预定义矢量的旋转。以下是如何使用旋转来确定最终向量的笛卡尔坐标：

假设向量是

[0,1,0]

（假设箭头长度为1个单位，从原点开始）

通过将矢量按任意顺序乘以旋转矩阵，应用x、y和z旋转，在每种情况下用相应的角度替换θ：

结果向量是通过指定的x、y和z旋转变换的原始向量

获得旋转向量后，查找向量在x-y平面上的投影变得很容易

例如，考虑向量

[10,20,30]

（笛卡尔坐标），x-y平面上的投影就是向量

[10,20,0]

。该矢量与水平面的夹角可计算为：

tan-1（20/10）=1.107 rad（从正x轴逆时针方向）

=63.43度（从正x轴逆时针方向）

---

这意味着箭头指向第63个和第64个“记号标记”之间，从直接指向右侧的记号标记开始逆时针计数。

@Asad问题是，根据3个旋转值，如何计算箭头的方向。您的演示似乎失败了。当我将所有滑块设置为其初始（最左侧）位置时，框不在其初始位置。假设您必须将箭头投影到x-y平面上。需要看一下我的线性代数书。sry，滑块不会一直下降到零。这是jQueryUI的东西。如果你点击盒子后面的空格，它会重新加载。@Asad我明白了。不过，这种平移不会改变箭头的方向，因此两个演示中的角度是相同的。顺便说一句，我的演示中的最大值应该是360，而不是255（我想是RGB）。正确的演示：那么，你是说这三个旋转值中的一个是不相关的吗？@ŠimeVidas不，这三个都是转换为笛卡尔坐标所必需的。转换后，z顺序就不必要了（因为它与我们想要的角度所在的平面正交）。如何将极坐标转换为笛卡尔坐标？@ŠimeVidas我现在讨论这一点，我将把它添加到答案中。在2D中，你只需进入

x=r*cos（theta）

，

y=r*sin（theta）

其中

theta

是关于Z轴的旋转，

r

是向量的长度。另外，我在术语上有点胡涂，在3D中，你称它们为球坐标，而不是极坐标。请参见meta：

-webkit-transform: rotateX(?deg) rotateY(?deg) rotateZ(?deg); // where does it point?