css - rotate - ¿Cuál es la mejor forma de calcular el ángulo de un elemento cuando se le aplican rotaciones múltiples?

transform css ejemplos

Question

Si haces un rotateX (180deg) rotateY (180deg) ahora está al revés. Entonces, si el mouse está configurado para mover un elemento secundario hacia arriba al arrastrar, ese elemento secundario ahora se moverá hacia abajo (dependiendo de cómo haya configurado las cosas).

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

SOLO CONFIGURACIÓN PARA WEBKIT

Echa un vistazo al violín (el código es un desastre, despojado). Dibuja marcas de 360 ​​tic, dispuestas en círculo, en el monitor de tu computadora. ¿Cómo se puede saber a qué marca de tic apunta la flecha (suponiendo que la caja esté en el centro exacto del círculo)?

Un tutorial que cubre lo básico está aquí , aquí .

* edit - el origen de la transformación que se utiliza está en el centro del cubo

Answer 1

Nota: Todo lo que sigue asume que está usando un vector que pasa por el origen, como en este ejemplo . En su ejemplo original, el vector está adicionalmente desviado del origen por el vector [0, 0, 60] . Esto complica los cálculos ligeramente, así que he usado la versión simplificada en mi explicación.

Su vector está actualmente definido por coordenadas esféricas. Los ángulos de Euler aplicaron rotaciones consecutivamente a un vector predefinido . Aquí se explica cómo puede usar sus rotaciones para determinar las coordenadas cartesianas del vector final:

1. Digamos que su vector es [0, 1, 0] (suponiendo que la flecha tiene 1 unidad de longitud y comienza en el origen)

2. Aplique rotaciones x, yyz multiplicando su vector por las matrices de rotación descritas aquí en cualquier orden, reemplazando θ con el ángulo correspondiente en cada caso:

3. El vector resultante es tu vector original transformado por las rotaciones especificadas x, y y z

Una vez que haya obtenido el vector girado, encontrar la proyección del vector en el plano xy se vuelve fácil.

Por ejemplo, considerando el vector [10, 20, 30] (coordenadas cartesianas), la proyección en el plano xy es el vector [10, 20, 0] . El ángulo de este vector desde la horizontal se puede calcular como:

tan ^-1 (20/10) = 1.107 rad (en sentido antihorario desde el eje x positivo)

= 63.43 grados (en sentido antihorario desde el eje x positivo)

Esto significa que la flecha señala entre las 63 "y 64" marcas de graduación "contando en sentido antihorario desde la que apunta directamente hacia la derecha.