Ruotare Testo HTML di 90gradi

Per Ruotare un testo HTML di 90° dobbiamo effetuare 2 passaggi.

1. Inserire un codice sul foglio CSS.
2. Inserire il dovuto codice HTML sul testo che vorremmo ruotare.

Se vogliamo che il testo sia visibilmente ruotato in tutti i Browser, come sappiamo ognuno di questi è basato su tecnologie differenti tra loro.

Quindi è necessario codificare 3 elementi (codice CSS) compatibili con i diversi Browser

.testo_ruotato {
/*browser basati Chrome, Safari...*/

-webkit-transform: rotate(-90deg);
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Internet Explorer*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Vediamo che -90deg equivale a una rotazione di 90° invece per i browser come Explorer i numeri 0, 1, 2, 3 equivale a 0, 90, 180 e 270 gradi in senso orario.

Infine andiamo a modificare il testo da ruotare con un codice HTML inserendo il seguente codice

<p class="testo_ruotato">

Qua inseriamo il testo...

</p>

Postato sotto: Informatica,Utility