CSS rotate
La proprietà CSS rotate per ruotare gli elementi (CSS3)
La proprietà rotate viene utilizzata con transform per ruotare un elemento attorno al suo centro, in un angolo specificato. È utile per animazioni e per creare effetti visivi dinamici, come rotazioni a 360 gradi o angoli più piccoli per elementi di design.
Sintassi
Significato dei valori principali:
-
deg: l'angolo di rotazione, in gradi (es.
45degper una rotazione di 45 gradi in senso orario). -
rad: l'angolo di rotazione in radianti (es.
1rad). Un giro completo corrisponde a2π rad. -
turn: un'unità di rotazione in termini di giri completi (es.
1turnequivale a 360 gradi).
Esempio proprietà: rotate
Codice Esempio: rotate
.rotate-example {
width: 150px;
height: 150px;
background-color: #50a14f;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transition: transform 1s ease-in-out;
}.rotate-example:hover {
transform: rotate(45deg); /* Ruota l'elemento di 45 gradi */
}
Contenuto Esempio: rotate
Esempio di utilizzo di rotate
In questo esempio, la proprietà rotate viene utilizzata per ruotare un elemento di 45 gradi in senso orario al passaggio del mouse:
CSS e HTML per l'elemento con rotazione:
<style>
.rotate-example {
width: 150px;
height: 150px;
background-color: #50a14f;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transition: transform 1s ease-in-out;
}
.rotate-example:hover {
transform: rotate(45deg); /* Ruota l'elemento di 45 gradi */
}
</style>
<div class="rotate-example">Ruota!</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
