A volte soluzioni di design insolite costringono il progettista del layout a ricorrere allo stesso soluzioni fuori standard quando si posiziona il testo. Ad esempio, ruota uno di elementi di testo ad una certa angolazione. Questo articolo ne tratterà diversi soluzioni semplici questo compito.

Sostituzione del testo con un'immagine

La soluzione più primitiva a questo problema sarà usare un'immagine. Per mezzo del famigerato software Adobe testo di Photoshop ruota facilmente a qualsiasi angolazione. Come capisci, non ci vuole molta intelligenza per usare questo metodo.

In alcune situazioni, è impossibile utilizzare un altro metodo, ma nella maggior parte dei casi si allontana dall'uso di un'immagine. Ciò è dovuto a una serie di svantaggi che accompagnano questa tecnica:

• L'impossibilità dell'utente di copiare le informazioni nel contenitore specificato;
• La complessità della procedura per apportare correzioni parte di testo elemento;
• Aumento del traffico sul server del sito;
• Crescita delle richieste al server durante l'aggiornamento della risorsa.

Nonostante il fatto che ci fossero così tanti aspetti negativi nell'uso dell'immagine, il metodo ha un paio di effetti positivi.

• Compatibilità crossbrowser– nessun problema durante la visualizzazione in browser diversi.
• Elevata capacità nel posizionamento dell'immagine.

Ancora dentro questo caso lati negativi superare. Ti consiglio di cercare altre soluzioni.

Utilizzo della proprietà di trasformazione CSS

L'applicazione di questo metodo è molto più elevata rispetto all'immagine. differenza significativa crea flessibilità nella modifica del testo e la possibilità di selezionare e copiare il contenuto di un contenitore ruotato. L'ostacolo principale per lo sviluppo di questa tecnica era la compatibilità cross-browser. Finora abbiamo ottenuto risultati abbastanza buoni su questo fronte, il che permette di applicare la proprietà transform senza alcun problema.

L'essenza della proprietà è dividere il piano per gradi. Di conseguenza, quando si specifica un determinato angolo, il contenitore assumerà la posizione corrispondente. Si precisa che l'immobile forma pura Non si applica. Dovrebbe essere accompagnato da proprietà del fornitore, che, di fatto, forniscono un alto indicatore di compatibilità cross-browser.

È importante notare che non è il testo all'interno del blocco che cambia la posizione, ma il blocco stesso, a cui la proprietà è indirizzata tramite il selettore di classe o in altro modo. Di seguito è riportato un esempio di utilizzo del metodo

Contenitore (- moz- trasforma: ruota(- 45 gradi) ; - webkit- trasforma: ruota(- 45 gradi) ; - o- trasforma: ruota(- 45 gradi) ; - ms- trasforma: ruota(- 45 gradi) ; trasforma: ruota( -45°) ; )

Di conseguenza, otteniamo qualcosa del genere:

Mi rivolgo a questa proprietà, il design verrà visualizzato senza problemi in Firefox, Opera, Internet Explower e altri browser webkit.

Chiamare tramite Javascript

L'essenza del processo è completamente simile a quella considerata prima di questo metodo. Per implementarlo, è necessaria una conoscenza minima di js-code, matematica e comprensione del filtro Matrix.

javascript

var deg2radians = matematica. PI*2/360, gradi = -4; rad = gradi * gradi2radianti, costheta = matematica. cos (rad) , sintheta = matematica. peccato(rad) ; jQuery(".roatedBlock") . css((filtro: "progid:DXImageTransform.Microsoft.Matrix(M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="auto expand", enabled=true)"} ) ;

Di conseguenza, otterremo la stessa immagine nel browser di quando si utilizza la proprietà transform.

Anche se non capisci un singolo carattere in questa voce, non importa. Per lavorare con questo codice, è sufficiente capire che il valore dell'angolo è scritto nella seconda riga, lo sostituisci a te stesso, il resto viene semplicemente copiato senza modifiche.

Caratteristiche dell'utilizzo di Javascript e CSS

Questi due metodi presentano diverse differenze minori nel principio di funzionamento, che è molto importante conoscere e prendere in considerazione.

La prima differenza si basa sulla differenza tra l'altezza del blocco e la sua posizione. La via d'uscita dalla situazione è abbastanza semplice ed è usare la proprietà margin. Indentando impostiamo il blocco su livello desiderato e posizione. Altre incoerenze di posizionamento possono essere risolte assegnando un valore di posizione assoluto al blocco, che funziona anche in modo efficace.

Un approccio più complesso e personalizzato si basa sull'uso della proprietà transform-origin. L'essenza di questa tecnica sarà descritta negli articoli successivi.

La prossima differenza sta nell'essenza del turno stesso. Quando si utilizza il codice js, il punto pivot si trova sul bordo del blocco. Nel secondo metodo, questo punto si trova al centro dell'elemento. Per facilitare la comprensione, guarda l'immagine qui sotto.

• Traduzione

Ciao, caro drogato! Ci sono molti esempi di grandi trasformazioni e transizioni CSS3 sul web. In questo articolo, passeremo alle basi dei fondamenti di CSS3 e impareremo come creare qualcosa di simile. Questo tutorial sarà utile per coloro che hanno appena iniziato a familiarizzare con CSS3. Iniziamo!

Sistema di coordinate

Per facilitare la comprensione di come funziona il movimento di un oggetto, lavoreremo in un sistema di coordinate.


Tuttavia, il nostro sistema di coordinate ha una particolarità: l'asse Y è diretto nella direzione opposta rispetto al solito. Come mai? Il fatto è che HTML e CSS (insieme, ad esempio, ad ActionScript) utilizzano il sistema di coordinate inverse, poiché la pagina web inizia da sinistra angolo superiore e scende.
La nota: Daremo per scontato che tu abbia già familiarità con Struttura HTML e CSS. Salterò spiegando come impostare file css come posizionare le immagini, ecc. Ci concentreremo sull'animazione delle immagini. Se non sei sicuro di quali siano le tue abilità alto livello, allora ti consigliamo di dare un'occhiata al corso di lezioni "HTML e CSS in 30 giorni" (gratuito e su lingua inglese) per imparare tutto ciò di cui hai bisogno.

1: Movimento orizzontale

Il primo movimento che dimostreremo è orizzontale. Sposteremo gli oggetti da sinistra a destra e da destra a sinistra.

Spostandosi a destra

Per spostare un oggetto useremo trasformare: tradurre(x,y), dove X - numero positivo e Y=0.


HTML
Apri il tuo editor di codice preferito e digita quanto segue:

Abbiamo definito tre classi per l'immagine:

• oggetto: Stabilire le regole principali del nostro oggetto.
• van: Useremo oggetti diversi per dimostrare ogni tipo di animazione.
• move-right: Usando questa classe, sposteremo il nostro oggetto.

css
Per prima cosa, posizioneremo il nostro oggetto (l'immagine del camion) al centro.
.object ( posizione: assoluta; ) .van ( in alto: 45%; a sinistra: 44%; )
In questo esempio, sposteremo l'oggetto 350px a destra. Sintassi utilizzata trasforma: traduci(350px,0);. Inoltre, l'oggetto si sposterà solo quando ci passi sopra con il mouse: #asse: passa il mouse .sposta a destra.

#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome e Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ )
Parametro trasformare sposterà semplicemente l'oggetto da un punto all'altro, ma non creerà un'animazione dato movimento. Per risolvere questo problema, dobbiamo aggiungere un parametro move nella classe .object.

Oggetto ( posizione: assoluta; transizione: tutti i 2 s facilmente entrati e usciti; -transizione webkit: tutti i 2 s facilmente entrati e usciti; /** Chrome e Safari **/ -moz-transizione: tutti 2 s facilmente entrati e usciti ; /** Firefox **/ -o-transition: all 2s easy-in-out; /** Opera **/ )
Questa regola di spostamento indicherà al browser di animare tutto parametri oggetto attivi 2 secondi(senza indugio) utilizzando la funzione facilità d'ingresso.
Possiamo utilizzare 6 diverse funzioni di temporizzazione del movimento:

• lineare: movimento in corso velocità costante dall'inizio alla fine.
• sollievo: Il movimento inizia lentamente e poi prende velocità.
• agio: Il movimento inizia lentamente.
• facilità: Il movimento termina lentamente.
• facilità d'ingresso: Il movimento inizia e finisce lentamente.
• cubico-bezier: definisce manualmente il valore di spostamento.

Spostandosi a sinistra

Per spostare un oggetto a sinistra, devi solo metterlo significato negativo all'asse OH, mentre Y Rimane invariato. Nel nostro caso, sposteremo l'oggetto in - 350px A sinistra.

HTML
Creare nuovo documento html e incollare il seguente codice:

Questa volta usiamo la classe muovere a sinistra, per spostare l'oggetto a sinistra.

css
Ora inserisci -350px per l'asse OX. trasforma: traduci(-350px,0);- sposta l'oggetto a sinistra.
#axis:hover .move-left ( transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari e Chrome **/ -o-transform: translate(-350px ,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ )
Poiché abbiamo già definito le regole di movimento in precedenza, non è necessario rifarlo.

2: Movimento verticale

Spostare un oggetto in verticale non sarà difficile, perché è identico a quello orizzontale. L'unica differenza è che useremo il valore -y salire e valorizzare y per scendere.

salendo

HTML
Il modello HTML è identico agli esempi precedenti. Tuttavia, sostituiremo il nostro oggetto con un razzo (per chiarezza) e assegneremo una classe di spostamento.

css
Proprio come il camion, collocheremo il razzo al centro:
.razzo ( in alto: 43%; a sinistra: 44%; )
Come abbiamo notato in precedenza, la coordinata Y deve essere negativa. Nel nostro caso, sposteremo l'oggetto 350px in alto.

#axis:hover .move-up ( transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: traduci(0,-350px); )

Stiamo scendendo

Come hai intuito, per spostare l'oggetto verso il basso, la coordinata Y deve essere positiva e la X deve essere 0. Sintassi: traduci(0,y);

HTML

css
#axis:hover .move-down ( transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); )

3: Movimento diagonale

Per spostare l'oggetto in diagonale, combiniamo i parametri X e y. La sintassi sarà: trasforma: traduci(x,y). A seconda della direzione, del valore X e y può essere sia positivo che negativo.

HTML

css
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: tradurre(350px,-350px); )

4: rotazione

La rotazione in CSS3 è controllata da coordinate di grado (da 0° a 360°). Per ruotare un oggetto, applica le seguenti opzioni: trasformare: ruotare (ndeg); dove n- gradi.

Rotazione in senso orario

Per ruotare un oggetto in senso orario, applica un valore positivo per ruotare (deg).

HTML

css
#axis:hover .rotate360cw ( trasforma: ruota(360 gradi); -webkit-trasforma: ruota(360 gradi); -o-trasforma: ruota(360 gradi); -moz-trasforma: ruota(360 gradi); )

Rotazione antioraria

Per ruotare un oggetto in senso antiorario, applica un valore negativo per ruotare (deg).

HTML

css
#axis:hover .rotate360ccw ( trasforma: ruota(-360deg); -webkit-transform: ruota(-360deg); -o-transform: ruota(-360deg); -moz-transform: ruota(-360deg); )

5: Zoom

Il ridimensionamento è caratteristica interessante css3. Usando il parametro scala(n) o parametro scala(x,y), possiamo aumentare o diminuire l'oggetto direttamente dentro quadro HTML. L'oggetto verrà ridimensionato in base al valore di n/x,y, dove l'asse x è la larghezza e y è l'altezza.
Diamo un'occhiata al seguente esempio.

Oggi vedremo un effetto così meraviglioso che è disponibile per noi grazie a CSS3. Riguarda sulla rotazione di un blocco o di un'immagine. Si è adattato sorprendentemente all'interfaccia del sito e, dopo aver imparato questa lezione, puoi applicare questo effetto ai tuoi progetti.

Quindi, abbiamo una serie di blocchi con alcuni contenuti. Vogliamo che il blocco ruoti attorno al suo asse quando ci passi sopra e mostri le informazioni sul retro. Penso che tutti una volta giocassero a carte e tutti ricordino quel momento emozionante in cui hanno dovuto capovolgerle. Faremo lo stesso ora. Ecco il nostro esempio originale:

Iniziamo a scrivere il nostro CSS. La prima cosa che dobbiamo fare, dato che stiamo lavorando con trasformazioni 3D, è impostare la distanza del nostro oggetto dal punto di vista. Ed ecco il primo codice di merda:

Flip-container ( -webkit-prospettiva:1000; -moz-prospettiva:1000; -ms-prospettiva:1000; prospettiva:1000; )

Puoi impostare qualsiasi altro numero. Sperimenta te stesso. Per le parti anteriore (.front) e posteriore (.back) del ns giocando a carte devi chiedere posizionamento assoluto in modo che si "sovrappongano" l'un l'altro nella posizione finale. Abbiamo anche bisogno di fare lato posteriore gli elementi capovolti non sono stati visualizzati durante l'animazione. La proprietà di visibilità sul retro ci aiuterà in questo:

Fronte, .retro ( -webkit-visibilità-backface:nascosto; -moz-visibilità-backface:nascosto; -ms-visibilità-backface:nascosto; visibilità-backface:nascosto; larghezza:100%; altezza:100%; posizione: assoluto; in alto: 0; a sinistra: 0; )

Imposta l'indice z per il lato anteriore (in modo che sia in alto nello stato predefinito) e descrivi gli angoli di rotazione predefiniti relativi all'asse verticale:

/* lato anteriore posizionato sul lato posteriore */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY( 0deg); transform: rotateY(0deg); z-index: 2; ) /* indietro, lato inizialmente nascosto */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform : ruotareY(180 gradi); -ms-trasformare: ruotareY(180 gradi); -o-trasformare: ruotareY(180 gradi); )

Al passaggio del mouse, le nostre carte ruoteranno, gli angoli dei loro lati cambieranno da 0 a 180 gradi e da 180 gradi a 0:

/* lato anteriore posizionato sul lato posteriore */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform : rotateY(180deg); -o-transform: rotateY(180deg); ) /* indietro, lato inizialmente nascosto */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz-transform: rotateY (0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); )

Siamo vicini al completamento del nostro lavoro. Resta solo da far capire al browser come elementi figlio deve essere renderizzato nello spazio 3D. Questa proprietà deve essere utilizzata insieme alla proprietà transform ed è denominata transform-style . Questa proprietà va applicata al blocco con la classe .flipper, non a .back e .front , altrimenti avremo una spiacevole sorpresa nel browser di Opera.

Flipper ( -webkit-transform-style: preservare-3d; -moz-transform-style: preservare-3d; -ms-transform-style: preservare-3d; -o-transform-style:preserve-3d; trasformare-stile: preservare-3d; )

Wow, ce l'abbiamo fatta. Abbiamo appena imparato a ruotare con i CSS. La parte migliore è che tutti lo supportano. browser moderni. Sì, utenti Internet Explorer può anche vedere questa bellezza dalla versione 10. Sfortunatamente, in Russia c'è una pratica viziosa di trascinare una serie di obsoleti IE8 e IE9. Quindi il mio cliente voleva che un suggerimento fosse mostrato nei browser meno recenti al momento del passaggio del mouse. Vediamo cosa possiamo fare.

La prima cosa che viene in mente è usare la direttiva @supports. Potremmo scrivere:

@supports (stile di trasformazione: preservare-3d) o (-moz-stile di trasformazione: preservare-3d) o (-webkit-stile di trasformazione: preservare-3d) ( /* stili per i browser che supportano */ /* 3D trasforma */)

Ahimè, anche IE 11 non ne sa nulla, quindi usiamo il vecchio modo:

Nel file ie.css descriveremo gli stili necessari per il nostro suggerimento. Non lo porterò qui, perché. va oltre lo scopo di questo articolo (e non c'è nulla di interessante lì). Puoi vederlo nel nostro esempio di rotazione verticale CSS, se lo desideri. Ma cosa succede se siamo interessati alla rotazione orizzontale? In questo caso, il nostro codice viene trasformato in questo modo:

Vertical.flip-container ( posizione: relativa; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213.5px; origine di trasformazione: 100% 213.5px; ) .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz -transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); ) .vertical .back, .vertical.flip-container:hover . front, .vertical.flip-container.hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX( 180 gradi); trasforma: ruotaX(180 gradi); )

La funzione rotate() nei CSS esegue una trasformazione di rotazione bidimensionale su un elemento attorno a un centro fisso. Il blocco non è deformato e non influisce sulla posizione dei contenitori HTML adiacenti. Il metodo consente di specificare l'angolo di rotazione. Inoltre, è possibile impostare un centro di rotazione arbitrario.

Trasformazione a blocchi

In CSS, rotate() è una funzione di trasformazione, quindi deve essere passata alla proprietà transform dell'elemento.

Elemento (trasforma: ruota(45 gradi); )

Il primo e unico argomento è l'angolo di cui verrà ruotato l'oggetto. La rotazione avviene nello spazio bidimensionale. Per le trasformazioni 3D, ci sono le funzioni CSS rotateX(), rotateY(), rotateZ() e rotate3d().

Lo spazio originariamente occupato dall'elemento nella pagina rimane ad esso riservato. Il movimento visivo si verifica in un nuovo livello, senza spostare i blocchi vicini.

Angolo di rotazione

L'argomento angle passato al metodo deve essere di tipo CSS . Esso consiste in valore numerico e unità di misura deg (dall'inglese degree - degree).

Un angolo positivo determina la rotazione dell'oggetto nella direzione del movimento in senso orario, un angolo negativo - nella direzione opposta.

Centro di rotazione

Per impostazione predefinita, un blocco viene ruotato attorno al suo centro geometrico. Per modificare questo punto, è necessario utilizzare la proprietà transform-origin.

Per impostazione predefinita, sono necessari tre parametri che definiscono le coordinate x, y e Z. Ma poiché rotate() in CSS è una trasformazione 2D, è sufficiente passare solo due valori.

Elemento (trasformare: ruotare(45deg); trasformare-origine: 20px 100%;)

La coordinata lungo ciascun asse può essere specificata in qualsiasi unità di lunghezza valida, come percentuale della dimensione del blocco o con parole chiave in alto, in basso, a sinistra, a destra. L'origine si trova nell'angolo in alto a sinistra del contenitore rettangolare.

Animazione di rotazione

La proprietà transform si presta bene al cambiamento dinamico, quindi CSS permette di creare un'animazione della rotazione di un elemento nello spazio bidimensionale.

Se desideri ruotare un oggetto in risposta a un'azione specifica dell'utente, come passare il mouse sopra, puoi utilizzare La proprietà CSS di transizione, che determina la lenta variazione del valore di altre proprietà.

Element (transizione: trasforma 2s; ) element:hover (trasforma: ruota(180 gradi);)

Per elemento originale non vengono applicate trasformazioni, ma quando ci si passa sopra, il blocco ruoterà dolcemente di 180 gradi per due secondi. Quando l'utente rimuove il cursore, si verificherà la stessa rotazione regolare alla posizione originale.

Di più in modo complicato l'animazione di un oggetto consiste nel determinare la sequenza dei fotogrammi utilizzando le proprietà e la regola @keyframes.

Elemento ( nome-animazione: ruota; durata-animazione: 2s; conteggio-iterazione-animazione: infinito; funzione di temporizzazione-animazione: lineare; ) @fotogrammi chiave ruota ( da ( trasforma: ruota(0deg); ) a ( trasforma: ruota (360 gradi); ) )

Un'animazione di rotazione viene applicata all'elemento specificato, specificando una rotazione completa da 0 a 360 gradi in due secondi. La proprietà di conteggio delle iterazioni dell'animazione imposta l'animazione in modo che si ripeta all'infinito e la funzione di temporizzazione dell'animazione imposta un effetto di transizione graduale. La combinazione della proprietà con le trasformazioni di rotazione consente di creare splendidi effetti dinamici.

A causa del fatto che i CSS si stanno sviluppando a un ritmo rapido, creare animazioni è diventato ancora più semplice senza usando Javascript su molti siti sono presenti elementi molto interessanti a cui non puoi fare a meno di interessarti. Nel tutorial di oggi vedremo come creare animazioni utilizzando i fotogrammi chiave (è ancora più interessante del semplice utilizzo usando CSS trasformazioni). Inoltre, la nostra animazione non sarà solo su un piano, ma avrà un effetto 3D. Se non sai perché e dove applicare un tale effetto, vai alla notizia completa e lì te lo parlerò.

Se le trasformazioni CSS della precedente serie di tutorial hanno funzionato Browser Firefox, Chrome, Safari e Internet Explorer 10+, quindi durante la creazione di animazioni 3D funzionerà solo nei browser WebKit e browser Mozilla. Maggior parte semplici trasformazioni funzionerà in IE10, ma qualcosa di più complesso non lo farà, poiché questo browser non supporta l'opzione preserva-3d per la creazione di livelli 3D.

Animazione CSS

L'animazione che creeremo conterrà un'immagine che ruota attorno all'asse Y:

Grande?!

Per chi non ha animazione 😉 :

Un po' di HTML

Tutto è chiaro e semplice nella struttura HTML:

Fotogrammi chiave CSS

Cosa sono i fotogrammi chiave?

Nel blocco @fotogrammi chiave ci sono un certo numero di regole chiamate fotogrammi chiave. I fotogrammi chiave contengono proprietà che vengono applicate in un momento specifico durante l'animazione. Durante l'animazione, i valori vengono interpolati ("transizione graduale" da un valore all'altro) e vediamo solo una transizione graduale.

Questo può sembrare complicato per te, ma questo è uno degli esempi più semplici.

Definiamo il fotogramma chiave di inizio e fine:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* WebKit e Opera */ spinner @-webkit-keyframes ( da ( -webkit-transform : rotateY(0deg) ; ) a ( -webkit-transform : rotateY(-360deg) ; ) ) /* Tutti gli altri browser */@keyframes spinner ( da ( -moz-transform : rotateY(0deg) ; -ms-transform: rotateY(0deg) ; trasforma: rotateY(0deg) ; ) a ( -moz-transform: rotateY(-360deg) ; -ms- trasformare: ruotareY(-360 gradi); trasformare: ruotareY(-360 gradi) ; ) )

Oltre ai fotogrammi chiave, siamo interessati anche a @keyframes spinner , dove indichiamo a cosa faremo riferimento durante l'animazione in seguito, ovvero filatore.

Crea una scena

Abbiamo bisogno di un elemento in cui la nostra animazione acquisisca volume e appaia un effetto volume. La scena, a differenza dell'immagine rotante, è fissa sulla pagina.

Per la scena useremo la proprietà della prospettiva, che è nuova per noi, che dà profondità. Il valore è specificato in pixel. Definisce la distanza dall'utente agli elementi in prospettiva. So che è difficile da capire subito 🙂 . Riduciamo da 1200px prima 300px e dai un'occhiata al risultato qui sotto:

Grande?!

E anche video:

Associare un'animazione a un elemento

Ora vedrai altre nuove proprietà. E non voglio nemmeno che tu li costringa immediatamente a memorizzare immediatamente e a capirne i significati. Puoi fare altrimenti: li guardi e quello che capisci, lo capirai. Infatti, mentre approfondisci le lezioni, le incontrerai spesso e inizierai a capire a cosa servono. Pertanto, non preoccuparti del fatto che ce ne sono molti e non sai e non capisci qualcosa!

E le proprietà sono:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

#spinner ( width : 250px ; height : 290px ; background : url ("http://www..jpg" ) no-repeat ; text-align : center ; color : #fff ; margin : 0 auto ; -webkit-animation -nome : filatore; -webkit-animazione-funzione di temporizzazione: lineare -conteggio-iterazione-animazione-webkit: infinito; -webkit-animazione-durata: 6s; nome-animazione : spinner; /* punta a fotogrammi chiave di animazione denominati "spinner" */ animazione-tempo-funzione: lineare; /* funzione di sincronizzazione, che verrà utilizzata per le trasformazioni */ conteggio-iterazione-animazione: infinito; /* numero di ripetizioni dell'animazione. "infinito" significa infinito */ animazione-durata: 6s; /* durata animazione */-webkit-stile-trasformazione: preservare-3d; -moz-stile di trasformazione: preservare-3d; -ms-stile-trasformazione: preservare-3d; stile di trasformazione: preservare-3d; /* indica che si tratta di una trasformazione 3D */) #spinner :hover ( -webkit-animation-play-state : in pausa; animation-play-state : in pausa; /* interrompe l'animazione */ }

Ho firmato le proprietà senza prefissi perché svolgono funzioni simili, solo per altri browser. Voglio anche notare che fermiamo l'animazione usando la proprietà speciale animation-play-state quando passiamo con il mouse sopra l'immagine.