SCRIPT CSS

ZANETTE
MARCO



CSS

Ruotare testo e box con i css crossbrowser

In questo articolo vi mostrerò come è possbile ruotare del testo o dei box attraverso i css3 e anche come rendere compatibile questo effetto con le vecchie versioni di explorer.
Qui sotto vi proporrò 2 esempi per ruotare box e testi: il primo che utilizza i css3 e quindi riferito all'utilizzo nei browser moderni, mentre il secondo per implementare questo effetto di rotazione nelle vecchie versioni di Internet Explorer.
Naturalmente per creare uno script crossbrowser il mio consiglio è di utilizzare entrambi i metodi contemporaneamente.



1 - Ruotare il testo con i css3 e la proprietà transform



Testo prova


  • <style type="text/css">
  • #ruota {
  •   width:100px;
  •   font-size:16px;
  •   background-color:#ccc;
  •   transform:rotate(20deg);
  • /* Safari and Chrome */   -webkit-transform: rotate(20deg);
  • /* Opera */   -o-transform: rotate(20deg);
  • /* Firefox */   -moz-transform: rotate(20deg);
  • /* IE 9 */   -ms-transform: rotate(20deg);
  • }
  • </style>
  • <div id="ruota">Testo prova</div>

Come avete visto ho creato uno stile css da assegnare al div per creare l'effetto di rotazione al testo attraverso la nuova proprietà transform:rotate introdotta dai css3.
La proprietà trasform:rotate accetta come parametro tra le due parentesi il grado di inclinazione che dovrà avere il box e quindi il testo in esso contenuto, nell'esempio ho creato un testo ruotato di 20 gradi in senso orario. Per ottenere una rotazione in senso antiorario dovete utlizzare valori negativi (ad es.transform:rotate(-10deg)); le rotazioni avvengono attorno il baricentro dell'oggetto.
Da notare che transform:rotate facendo parte dei css di terza generazione è supportata in tutte le ultime versioni dei browser grazie all'aggiunta dei suffissi necessari per i vari browser (-ms per IE9 ad esempio ecc.).



2 - Ruotare il testo nei vecchi browser (IE8, IE7...)
Per implementare un effetto rotazione in queste vecchie versioni di explorer ci sono 2 vie praticabili: filter Basic Image e filter Matrix.

Filter Basic Image
Con filter Basic Image è possbile definire 3 diversi gradi di rotazione impostando la proprietà rotation a 1 (90°), 2 (180°) e 3 (270°).
Riporto qui sotto un esempio.



Testo prova


  • <style type="text/css">
  • #ruota {
  •   width:100px;
  •   font-size:16px;
  •   background-color:#ccc;
  •   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  •   -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
  • }
  • </style>
  • <div id="ruota_basic_image">Testo prova</div>


Filter Matrix
Con filter matrix è invece possibile qualsiasi tipo di rotazione come con i css3 e la proprietà transform.
Filter matrix richiede 4 parametri per definire gli angoli del box, vediamo quali sono e come calcolarli:
• m11 = cos((gradi)*3,14159265*2/360)
• m12 = -sen((gradi)*3,14159265*2/360)
• m21 = sen((gradi)*3,14159265*2/360)
• m22 = cos((gradi)*3,14159265*2/360)
Riporto qui sotto un esempio di rotazione di 13°.



Testo prova


  • <style type="text/css">
  • #ruota {
  •   width:100px;
  •   font-size:16px;
  •   background-color:#ccc;
  •   filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.999992159105476,
        M12=-0.228844573136153,
        M21=0.228844573136153,
        M22=0.999992159105476, sizingMethod='auto expand');
      zoom: 1;
  •   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
        M11=0.999992159105476,
        M12=-0.228844573136153,
        M21=0.228844573136153,
        M22=0.999992159105476, sizingMethod='auto expand')";
      zoom: 1;
  • }
  • </style>
  • <div id="ruota_basic_image">Testo prova</div>





Scopri la sezione dedicata agli script.

Scopri la sezione dedicata agli script.