Normalmente, quando il testo viene aggiunto a una pagina Web in posizione orizzontale sullo schermo. Tuttavia, CSS fornisce vari modi per cambiare la posizione del testo in base alle preferenze. Possiamo anche cambiare la direzione e l'angolo del testo usando le proprietà CSS. Più specificamente, il testo può essere ruotato a 90 gradi.

Questo manuale ti insegnerà come ruotare il testo a 90 gradi. Quindi iniziamo!

Come ruotare il testo di 90 gradi in CSS?

Per ruotare il testo a 90 gradi in CSS, il “trasformare"La proprietà viene utilizzata. Prima di usarlo, in primo luogo, discuteremo di questa proprietà CSS per una migliore comprensione.

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

IL "trasformare"La proprietà viene utilizzata per la trasformazione 2D e 3D di qualsiasi elemento. Questa proprietà consente a un elemento di ruotare, muoversi, inclinarsi e scala. Puoi anche utilizzare questa proprietà per ruotare il testo aggiunto a 90 gradi.

Sintassi

Sintassi del "trasformare"La proprietà è:

Trasformazione: nessuna | Funzioni di trasformazione

Descrizione dei valori di cui sopra sono:

• nessuno: Viene utilizzato per impostare alcuna trasformazione su nessun elemento.
• Funzioni di trasformazione: Può essere utilizzato per specificare funzioni diverse, come rote (), scala (), muove () e inclinazione ().

Passiamo all'esempio pratico per utilizzare la proprietà di trasformazione per il testo rotante a 90 gradi.

Esempio: testo rotante 90 gradi in CSS

Nell'HTML, aggiungeremo un titolo e un paragrafo utilizzando

E

tag, rispettivamente:

Linuxhint

Rotazione del testo a 90 gradi

Questo mostrerà il seguente output:

Ora ci sposteremo sul CSS e applicheremo il "trasformare"Proprietà ad esso. Per farlo, usa "P"Per accedere al paragrafo creato nel file HTML. Successivamente, usa la proprietà trasforma e imposta l'angolo di rotazione come "90DEG"Nella funzione rota (). Successivamente, usa il “Transform-origin"Proprietà e imposta il suo valore su"Sinistra"Per ruotare il testo nella direzione in senso orario. Inoltre, abbiamo impostato il margine-sinistra "70px"Per dare il margine dal lato sinistro del paragrafo e per lo styling, impostare il carattere e le dimensioni del carattere come"più audace" E "X-Large"Rispettivamente:

P
Trasformazione: rotazione (90DEG);
Transform-Origin: a sinistra;
Margin-Left: 70px;
Font-weight: audace;
Font-Size: X-Large;

Nota: Qui, il "Transform-origin"La proprietà viene utilizzata per impostare l'asse x e l'asse Y di rotazione.

Dopo l'implementazione del codice sopra, vai su HTML ed eseguilo per vedere il seguente risultato:

Si può osservare che usando il "trasformare"Proprietà, il nostro testo è ruotato con successo a 90 gradi.

Conclusione

Per ruotare il testo a 90 gradi, il “trasformare"La proprietà viene utilizzata. L'angolo della rotazione è impostato in base al valore di grado specificato. Usando questo, puoi anche definire diversi angoli del testo in base alla tua scelta. In questo articolo, abbiamo spiegato come ruotare il testo di 90 gradi usando la proprietà Transform con l'aiuto di un esempio.