Proprietà CSS rotate

Pagina precedente Destra
Pagina successiva row-gap

Definizione e uso

rotate L'attributo ti permette di ruotare l'elemento.

rotate L'attributo definisce un valore che rappresenta la quantità di rotazione dell'elemento attorno all'asse z. Per ruotare l'elemento attorno all'asse x, y o in altro modo, è necessario definire corrispondentemente.

rotate Il valore dell'attributo può essere un angolo, nome asse + angolo, o tre valori + angolo.

Se fornito solo un angolo, l'elemento ruoterà in senso orario attorno all'asse z.
Se fornito nome asse + angolo, l'elemento ruoterà in senso orario attorno all'asse specificato.
Se forniti tre valori + angolo, questi tre valori definiscono un vettore, attorno al quale l'elemento verrà ruotato.

Per comprendere meglio rotate l'attributo, vediDimostrazione.

Attenzione:Un'altra tecnica per ruotare un elemento è utilizzare Funzione CSS rotate() dell'attributo CSS transform.

Esempio

Esempio 1

Cambia la rotazione dell'elemento:

div {
  rotate: 30deg;
}

Prova a fare tu stesso

Esempio 2

Quando rotate Quando l'attributo è impostato su vettore e angolo, l'elemento ruoterà attorno al vettore.

In questo caso, il vettore è [1 1 0] nel piano bidimensionale, con coordinate x e y, e poi ruota di 60 gradi:

div {
  rotate: 1 1 0 60deg;
}

Prova a fare tu stesso

Sintassi CSS

rotate: axis angle|initial|inherit;

Valore dell'attributo

Valore	Descrizione
axis	Opzionale. Se non impostato, il valore predefinito è l'asse z. Definisce l'asse di rotazione dell'elemento. Valori possibili: x y z
angle	Definisce la quantità di rotazione dell'elemento. Unità possibili: deg（gradi) rad（radiani) turn（circi)
vettore angle	Questi tre numeri definiscono un vettore, attorno al quale l'elemento verrà ruotato. Questi tre numeri rappresentano le coordinate x, y e z del vettore. L'ultimo valore rappresenta l'angolo di rotazione. Valori possibili: number number number angle
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eruga questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	none
Ereditarietà:	No
Produzione animazione:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.rotate="-120deg"