La funzione CSS rotate() distorce un elemento di un certo numero di gradi. Puoi ruotare un elemento in senso orario usando un numero positivo di gradi. Oppure puoi ruotare un elemento in senso antiorario usando un numero negativo.
Oggi impareremo come ruotare gli elementi con i CSS. Perché ruotare un elemento? Gli elementi rotanti rendono la tua pagina web più interattiva. Usato correttamente, un elemento rotante si aggiungerà all`estetica del tuo sito.
Durante la lettura di questo articolo, fai riferimento a repository complementare , così puoi vedere i concetti in azione. Sapere come ruotare un elemento sarà un`ottima aggiunta alla tua casella degli strumenti CSS.
CSS ruota ()
La funzione CSS ruota () ti consente di ruotare un elemento su un asse 2D. La funzione di rotazione () accetta un argomento: l`angolo con cui vuoi ruotare il tuo elemento web. Puoi ruotare un elemento in senso orario o antiorario.
Diamo un`occhiata alla sintassi della funzione di rotazione ():
Il valore "angolo" rappresenta il numero di gradi in cui l`elemento deve ruotare. È possibile specificare una rotazione in senso orario utilizzando un numero positivo di gradi (ad esempio 45). Oppure puoi ruotare nella direzione opposta usando un valore di grado negativo (ad es. -39).
La funzione di rotazione () può essere applicata a qualsiasi elemento HTML. Ad esempio, puoi ruotare un paragrafo di testo. Oppure puoi ruotare un`immagine.
Una rotazione HTML appare non appena esegui il rendering della pagina, quindi non c`è rotazione visibile. Per vedere la rotazione in azione, devi utilizzare una transizione CSS . Le transizioni cambiano lo stato di un elemento quando viene eseguita un`azione, ad esempio quando un cursore passa sopra un elemento.
