Funzione rotate3d

La funzione rotate3d imposta la rotazione di un elemento di un angolo specificato simultaneamente rispetto agli assi X, Y, Z nello spazio tridimensionale. Viene utilizzata insieme alla proprietà transform. Il valore della proprietà è un angolo in qualsiasi unità per angoli.

La funzione accetta 4 parametri, scritti separati da virgole. I primi tre parametri determinano il vettore dell'asse nello spazio tridimensionale, rispetto al quale verrà effettuata la rotazione. Il quarto parametro imposta l'angolo di rotazione.

Sintassi

cssselettore {
  transform: rotate3d(X, Y, Z, angolo);
}

Esempio

In questo esempio il vettore dell'asse sarà diretto nell'angolo in alto a destra dello schermo:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Vedi anche