对元素应用多次旋转时计算元素角度的最佳方法是什么 [英] What is the best way to calculate an element's angle when multiple rotates are applied to it

问题描述

如果你做一个rotateX(180deg)rotateY(180deg)，它现在是颠倒的.因此，如果鼠标设置为在拖动时向上移动子元素，该子元素现在将向下移动(取决于您的设置方式).

If you do a rotateX(180deg) rotateY(180deg) it's upside down now. So if the mouse is set to move a child element up on drag that child element will now be moving down (depending on how you have things set up).

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

仅适用于 WEBKIT 的设置

看一看 fiddle(代码一团糟，被精简了).在您的计算机显示器上绘制排列成圆圈的 360 个 tic 标记.你怎么知道箭头所指的刻度是什么(假设盒子正好在圆的中心)?

Take a look at the fiddle (code is a mess, stripped down). Draw 360 tic marks, arranged in a circle, on your computer monitor. How can you tell what tic mark the arrow is pointing to (assuming the box is at the exact center of the circle)?

涵盖基础知识的教程是这里，这里.

A tutorial that covers the basics is here, here.

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

*edit - the transform-origin being used is at the center of the cube

推荐答案

注意: 以下所有内容都假定您使用的是通过原点的向量，如 这个例子.在您的原始示例中，向量还从原点偏移了向量 [0, 0, 60].这会使计算稍微复杂化，所以我在解释中使用了简化版本.

Note: Everything that follows assumes you are using a vector that passes through the origin, as in this example. In your original example the vector is additionally offset from the origin by the vector [0, 0, 60]. This complicates calculations slightly, so I have used the simplified version in my explanation.

您的矢量当前由球坐标 欧拉角 连续应用旋转到预定义的矢量定义.以下是如何使用旋转来确定最终向量的笛卡尔坐标:

Your vector is currently defined by spherical coordinates Euler angles consecutively applied rotations to a predefined vector. Here is how you can use your rotations to determine the cartesian coordinates of the final vector:

1. 假设您的向量是 [0, 1, 0](假设箭头的长度为 1 个单位并从原点开始)

1. Let us say your vector is [0, 1, 0] (assuming the arrow is 1 unit long and starts at the origin)

通过将向量乘以旋转矩阵来应用 x、y 和 z 旋转 描述这里以任何顺序，在每种情况下用相应的角度替换θ:

Apply x, y and z rotations by multiplying your vector by the rotation matrices described here in any order, replacing θ with the corresponding angle in each case:

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

The resulting vector is your original vector transformed by the specified x, y and z rotations

一旦你得到了旋转的向量，找到向量在 x-y 平面上的投影就变得很容易了.

Once you have obtained the rotated vector, finding the projection of the vector on the x-y plane becomes easy.

例如考虑向量[10, 20, 30](笛卡尔坐标)，在xy平面上的投影就是向量[10, 20, 0].这个向量与水平面的角度可以计算为:

For example, considering the vector [10, 20, 30] (cartesian coordinates), the projection on the x-y plane is the vector [10, 20, 0]. The angle of this vector from the horizontal can be calculated as:

tan^-1(20/10) = 1.107 rad(从正 x 轴逆时针方向)

tan^-1(20/10) = 1.107 rad (counter clockwise from the positive x axis)

= 63.43 度(从 x 轴正方向逆时针方向)

                    = 63.43 deg (counter clockwise from the positive x axis)

这意味着箭头指向第 63 个和第 64 个刻度线"之间.从直接指向右边的那个开始逆时针计数.

This means the arrow points between the 63rd and 64th "tick marks" counting counter clockwise from the one pointing directly to the right.

这篇关于对元素应用多次旋转时计算元素角度的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！