Durante lo sviluppo di una pagina Web, i div vengono generalmente posizionati orizzontalmente sullo schermo per impostazione predefinita. Tuttavia, CSS fornisce diversi modi per riorganizzare Div in base alle preferenze. Puoi anche cambiare l'orientamento e l'angolo del div usando CSS. In questo caso, è possibile ruotare il Div in base al grado richiesto.

In questa guida, parlerai specificamente della procedura per ruotare un div ad un angolo di 90 gradi. Quindi iniziamo!

Come ruotare di div 90 gradi in CSS?

Per ruotare il div a 90 gradi in CSS "trasformare"La proprietà viene utilizzata. Come primo passo, discuteremo della proprietà di trasformazione in modo da poter capire meglio come funziona.

Cos'è la proprietà "trasforma" in CSS?

Per la trasformazione di un elemento 2D o 3D, il “trasformare"Viene utilizzata la proprietà di CSS. Questa proprietà consente a un elemento di ruotare, muoversi, inclinarsi e scala.

Sintassi

La sintassi della proprietà Transform è:

Trasformazione: nessuna | Funzioni di trasformazione

Ecco la descrizione dei valori di cui sopra:

• nessuno: È usato per limitare la trasformazione di qualsiasi elemento.
• Funzioni di trasformazione: Esistono varie funzioni come "ruotare()","scala()","mossa()" E "storto()"Questo può essere specificato.

Ora, passiamo all'esempio pratico dell'utilizzo della proprietà Transform per ruotare un Div 90 gradi in CSS.

Esempio: rotazione di un div 90 gradi usando la proprietà "trasforma" CSS

Prima di tutto, nell'HTML, creeremo una voce usando

tag e un contenitore con il nome di classe come "Div2":

Ruota Div 90 gradi:

Rotazione di Div

Quindi, in CSS, usa "div"Per accedere al contenitore creato nel file HTML. Successivamente, imposta la larghezza e l'altezza del div come "200px" E "100px", Imposta il colore di sfondo del div come"RGB (129, 129, 38)". Inoltre, imposteremo il confine di Div come "5px" larghezza, "solidoTipo "e"rosso" colore:

div
larghezza: 200px;
Altezza: 100px;
Background: RGB (129, 129, 38);
Bordo: 5px rosso solido;

Il risultato del codice dato è:

Ora, applica il "trasformare"Proprietà e pass"90"Gradi come argomento sulla funzione rotata () e la trasformazione-origine come"30%":

Trasformazione: rotazione (90DEG);
Transform-Origin: 30%;

Salva il codice aggiunto e apri il file HTML nel browser. Di conseguenza, vedrai che il Div aggiunto viene ruotato di 90 gradi:

Abbiamo compilato il metodo più semplice per ruotare un div 90 gradi in CSS.

Conclusione

Per la rotazione di un div 90 gradi in CSS, il "trasformare"La proprietà può essere utilizzata. È usato per la trasformazione di elementi 2D o 3D. Inoltre, questa proprietà consente a un elemento HTML di ruotare, infilzato, ridimensionato e spostato. Questo manuale ha discusso della procedura di rotazione di un div 90 gradi in CSS.