Come ruotare un elemento attorno a una linea diversa da X = 0, Y = 0 e Z = 0 usando CSS3?

Question

Ho creato questo page per una migliore comprensione della domanda. Come puoi vedere usando CSS3 possiamo ruotare un elemento attorno all'asse X, Y o Z usando transform: rotate[XYZ](M deg/rad).

Ma sto cercando una funzione per ruotare l'elemento su una determinata linea. Ad esempio, ruotando l'elemento sulla linea x=y. o ancora più complesso y=2x+3.

Se non lo capisci, tieni per favore un foglio in mano e giralo dai due angoli opposti (per y=x o y=-x). o guarda questa immagine.

Sto indovinando che sarebbe combinazione di due rotazioni, ma non so come calcolare le rotazioni.

Aggiornamento:

non sapevo c'è una funzione rotate3d per i CSS transform. questa funzione accetta quattro argomenti rx, ry, rz e deg. Ritengo che sarebbe molto utile per questo problema.

Un'altra cosa è quando si modifica translate[X,Y,Z] in realtà cambia l'origine della rotazione. Ciò significa che se si desidera ruotare intorno Y=10px si dovrebbe cambiare il translateZ a 10px

Update2:

Il mio vero obiettivo è la creazione di uno strumento per applicare i CSS trasformare proprietà utilizzando una GUI. come puoi vedere nel mio file jsbin. Voglio estenderlo a qualsiasi cosa tu possa fare transform possibile. Uno di questi è la rotazione. Sono sicuro che è possibile ruotare un elemento attorno ad altre linee rispetto a x=0 ... ma non so come posso fare il calcolo. Ad esempio, la rotazione di 45 gradi intorno a Y e 45 gradi intorno a Z equivale a una rotazione di 45 gradi intorno a x=y. Ho bisogno di una soluzione per tutte le linee nello spazio.

Answer 1

Soluzione per domanda che mi sto chiedendo è css funzione, rotate3d trasformare. Usando questa funzione potremmo ruotare gli elementi DOM attorno a qualsiasi linea nello spazio 3D.

Questa funzione accetta quattro argomenti che tre primi sono x, e z e l'ultimo è rotazione.Mi pare di capire come questa funzione lavoro si può tradurre la vostra funzione di algebra lineare linea in rotate3d come questo:

Se si dispone di una funzione di linea come 1x + 2y + 3z = 0 e desidera ruotare il vostro grado elemento 30 allora si dovrebbe applicare questa proprietà CSS all'elemento; transform: rotate3d(1, 2, 3, 30deg);.

Ho creato la piccola app this per dimostrare come funziona rotate3d.

Answer 2

Credo che capisco cosa intendi. Quindi, se conosci Photoshop, quando ruoti un'immagine, puoi scegliere un punto di ancoraggio. Questa è la stessa idea. Quindi aggiungi il punto di rotazione del codice: 50% 50% alla classe. L'unico problema è che il punto di rotazione non è ancora accettato in alcun browser, ma lo sarà presto. Ho pensato che dovresti sapere che questo alla fine sarà una possibilità. here per ulteriori

Answer 3

Suggerisco di leggere l'introduzione all'articolo Rotation About an Arbitrary Axis in 3 Dimensions. Le basi sono:

(1) Translate space so that the rotation axis passes through the origin. 
(2) Rotate space about the z axis so that the rotation axis lies in the xz plane. 
(3) Rotate space about the y axis so that the rotation axis lies along the z axis. 
(4) Perform the desired rotation by θ about the z axis. 
(5) Apply the inverse of step (3). 
(6) Apply the inverse of step (2). 
(7) Apply the inverse of step (1).