February 21
CSS Level 3 include un metodo "trasformare" che prende il numero di gradi come parametro e ruota contenuto, ad esempio testo, con tale numero di gradi. È possibile definire una classe CSS per ogni grado di rotazione e utilizzare JavaScript per ruotare il testo cambiando la classe CSS assegnata il contenuto di un tag. Ad esempio, è possibile animare il testo utilizzando il JavaScript "setInterval" metodo per chiamare una funzione di rotazione a intervalli regolari a tempo.
1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML. Inserire le intestazioni HTML nel documento:
<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Meta charset = "utf-8">
<Title> Rotazione testo </ title>
2 Creare stile CSS per il corpo del documento per impostare un margine e grandi dimensioni per il testo da ruotare font:
<Style>
body {margin: 60px; font-family: Arial, Helvetica, sans-serif; font-size: 36px; }
3 Definire classi CSS a diversi gradi di rotazione. Visualizzare il testo in un blocco, impostare la posizione di essere "relativo", impostare l'altezza e la larghezza e includere le proprietà di trasformazione generici e specifici del produttore per ruotare il testo di un certo numero di gradi:
.rotation0 {display: block; position: relative; width: 200px; height: 200px; }
.rotation60 {display: block; position: relative; width: 200px; height: 200px; -webkit-transform: rotate (60deg); -moz-transform: rotate (60deg); -ms-transform: rotate (60deg); -o-transform: rotate (60deg); transform: rotate (60deg); }
.rotation120 {display: block; position: relative; width: 200px; height: 200px; -webkit-transform: rotate (120deg); -moz-transform: rotate (120deg); -ms-transform: rotate (120deg); -o-transform: rotate (120deg); transform: rotate (120deg); }
.rotation180 {display: block; position: relative; width: 200px; height: 200px; -webkit-transform: rotate (180 °); -moz-transform: rotate (180 °); -ms-transform: rotate (180 °); -o-transform: rotate (180 °); transform: rotate (180 °); }
.rotation240 {display: block; position: relative; width: 200px; height: 200px; -webkit-transform: rotate (240deg); -moz-transform: rotate (240deg); -ms-transform: rotate (240deg); -o-transform: rotate (240deg); transform: rotate (240deg); }
.rotation300 {display: block; position: relative; width: 200px; height: 200px; -webkit-transform: rotate (300deg); -moz-transform: rotate (300deg); -ms-transform: rotate (300deg); -o-transform: rotate (300deg); transform: rotate (300deg); }
.rotation360 {display: block; position: relative; width: 200px; height: 200px; -webkit-transform: rotate (360deg); -moz-transform: rotate (360deg); -ms-transform: rotate (360deg); -o-transform: rotate (360deg); transform: rotate (360deg); }
</ Style>
4 Creare una funzione JavaScript cambiare la classe del testo alla rotazione successiva, o ricominciare a zero se il prossimo rotazione calcolato è maggiore di 360 gradi. Inizializzare una variabile globale per monitorare il grado di rotazione corrente:
<Script>
var rotazione = 0;
funzione di rotazione () {
rotation = (rotation+60 > 360) ? 0 : rotation+60;
. Document.getElementById ( "testo") className = "rotazione" + rotazione;
}
5 Chiamare il JavaScript "setInterval" metodo per eseguire la funzione di rotazione a intervalli regolari a tempo, specificato in millisecondi:
window.setInterval ( "Ruota ()", 1000);
</ Script>
</ Head>
6 Creare un tag <div> per il testo e assegnare la prima classe CSS. Inserisci il testo da ruotare all'interno del tag <div>:
<Body>
<Div id = "text" class = "rotation0"> ROTAZIONE </ div>
</ Body>
</ Html>
7 Salvare il file. Aprire con un browser e guardare il testo ruotare sullo schermo.