Come ruotare il testo da Laurea in JavaScript

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.

istruzione

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.

Consigli e avvertenze

  • Fino a quando i browser adottano universalmente i più recenti standard CSS, è necessario utilizzare il metodo generico "trasformare" e aggiungere un metodo di "trasformare" con ogni estensione fornitore.

Articoli Correlati