如果你做一个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

看看的小提琴（code是一个烂摊子，剥离下来）。绘制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 - 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.

您载体，目前由球面坐标定义 欧拉角 连续应用旋转至predefined载体。这里是你可以用你的旋转来确定最终向量的笛卡尔坐标：

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:

通过由旋转矩阵这里描述乘以你的载体应用的x，y和z旋转的以任何顺序，在每种情况下对应的角度θ替换 Let us say your vector is [0, 1, 0] (assuming the arrow is 1 unit long and starts at the origin)

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

一旦获得经旋转的向量，找到矢量的投影在xy平面上变得容易。

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:

谭 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.