What is the best way to calculate an element's

Question

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?

ONLY SETUP FOR WEBKIT

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

Answer 1

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. Let us say your vector is [0, 1, 0] (assuming the arrow is 1 unit long and starts at the origin)

2. 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:

                                                

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

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

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 (counter clockwise from the positive x axis)

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

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