Un'occhiata alle trasformazioni 2D di CSS3
Il Modulo di trasformazione è un'aggiunta straordinaria nei CSS3, ci vuole il modo in cui manipoliamo gli elementi di un sito Web al livello successivo.
Ci sono alcuni esperimenti che mi stupiscono davvero, esempi come questo. Tuttavia, non creeremo qualcosa come un'icona solo CSS che può in qualche modo trasformarsi in un Autobot, in quanto potrebbe essere travolgente e non abbastanza utilizzabile nella vita reale.
Invece, questa volta, faremo un passo indietro e rivedremo le basi delle trasformazioni 2D di CSS3 per vedere come funziona a un livello fondamentale.
La sintassi
Il modulo CSS3 Transformations ci consente fondamentalmente di trasformare un elemento in una certa misura, come traslazione, ridimensionamento, rotazione e inclinazione.
La sintassi ufficiale è transform metodo (valore). Tuttavia, come qualsiasi altra grande aggiunta di CSS3 che è ancora nelle fasi iniziali, i browser correnti hanno ancora bisogno della versione di sintassi per eseguire le trasformazioni. Quindi, la sintassi completa risulterebbe così:
transform: metodo (valore); / * W3C Official Syntax * / -o-transform: metodo (valore); / * Opera 10.5+ * / -ms-transform: metodo (valore); / * Internet Explorer 9.0+ * / -moz-transform: metodo (valore); / * Firefox 3.6+ * / -webkit-transform: metodo (valore); / * Chrome / Safari 3.2+ * /
Inoltre, il metodo a cui ci riferiamo sopra è il trasformare funzioni, che potrebbe essere sostituito con uno dei seguenti: tradurre(), scala(), ruotare() o storto().
Il valore
La maggior parte del valore del metodo corrisponderà al Asse X e Y. Se ricordi il sistema di coordinate cartesiane della tua classe di matematica nella scuola superiore, il principio di base è abbastanza simile, l'asse X rappresenta il orizzontale linea e l'asse Y rappresenta il verticale linea.
Tranne per le rotazioni. Il rotazione userà il coordinate polari che è espresso in gradi che vanno da 0 a 360.
I valori per tutti i metodi possono essere sia negativi che positivi. Basta prendere nota, però, mentre la pagina web viene letta in sequenza dall'alto verso il basso, il che rende l'asse delle Y nel web un lavoro opposto al principio originale delle coordinate cartesiane. Ciò significa che quando aggiungi un valore negativo a Y, si sposterà invece in alto.
Usando le trasformazioni
Ora, vediamo la seguente dimostrazione di base per vedere la trasformazione in azione.
Io traduco
Non essere offuscato con il termine tradurre, non tradurrà la lingua straniera. Il tradurre qui è in realtà un metodo per spostare elementi in qualche direzione.
Il metodo contiene due valori; X e Y. il Valore X come abbiamo sottolineato sopra prenderà l'elemento orizzontalmente; a sinistra oa destra, mentre il Y il valore lo porterà verticalmente a il fondo o verso l'alto.
Ora, vediamo alcune semplici dimostrazioni di seguito:
div width: 100px; altezza: 100 px; transform: translate (100px, 250px);
Lo snippet precedente sposta l'elemento per 100 px a destra e 250 px in basso.
div width: 100px; altezza: 100 px; transform: translate (100px, 0);
Lo snippet precedente sposta l'elemento a destra per 100px, perché stiamo azzerando l'asse Y. Quindi, se vogliamo spostare l'elemento a sinistra, abbiamo solo bisogno di impostare l'asse X in negativo, come segue:
div width: 100px; altezza: 100 px; transform: translate (-100px, 0);
- Demo "Translate"
In alternativa, siamo in grado di spostare l'elemento in un'unica direzione con questi singoli metodi; translateX () e translateY (), la differenza è che ognuno di questi metodi accetta solo un valore.
Quindi, praticamente parlando, il transform: translate (-100px, 0) è uguale a trasformare: translateX (-100px).
II - Scala
Il scala il metodo ci consente di ingrandire o ridurre gli elementi dalla sua dimensione reale. Il valore della scala è lo stesso di tradurre metodo sopra, contiene anche X e Y. L'unica differenza è che non specifichiamo l'unità. Ecco un esempio:
div width: 100px; altezza: 100 px; transform: scale (1.5);
L'esempio sopra ingrandirà il div 1.5 o 150% delle sue dimensioni reali, e poiché lo scaliamo equamente per entrambe le direzioni X e Y, dobbiamo solo dichiararlo in un unico valore. Puoi anche dichiararlo in questo modo trasformare: scala (1.5,1.5); se vuoi andare più in dettaglio, farà lo stesso.
Inoltre, se vogliamo ridurre l'elemento, utilizzeremo specificatamente un valore compreso tra 0.999 e 0 assoluto, come nell'esempio seguente, che ridurrà la dimensione del div per il 50% o la metà:
div width: 100px; altezza: 100 px; transform: scale (0,5);
Ma, sii cauto, se imposti il valore come assoluto “0” il div scomparirà, quindi a meno che tu non abbia una ragione valida per farlo, non lo consiglierei di farlo.
- Demo "Scale"
III - Ruota
Come accennato in precedenza in questo post, il ruotare il metodo usa coordinate polari, quindi il valore è espresso in gradi. Ecco due esempi
Lo snippet seguente ruoterà il div 30 gradi in senso orario.
div width: 100px; altezza: 100 px; transform: ruotare (30 gradi);
Un valore negativo, come illustrato nell'esempio seguente, ruoterà il div nella direzione opposta (in senso antiorario) allo stesso grado.
div width: 100px; altezza: 100 px; transform: ruotare (-30 gradi);
- Demo "Ruota"
IV - Inclina
Il storto il metodo ci consente di creare una sorta di parallelogramma. Contiene anche due valori dell'asse X e Y. Tuttavia, il valore stesso è espresso in gradi, invece delle misure lineari come quelle che usiamo per il scala o il tradurre metodo. Ecco un esempio:
div larghezza: 200px; altezza: 100 px; transform: skew (30deg, 10deg);
- Demo "Skew"
V - Metodo multiplo
Il trasformare la proprietà non si limita a gestire un solo metodo, infatti possiamo includere più metodi in singole dichiarazioni, come questa:
div width: 100px; altezza: 100 px; transform: translateX (100px) ruota (45deg);
Il frammento sopra riportato muoverà l'elemento 100 px verso destra e allo stesso tempo ruoterà anche di 45 gradi.
Demo "Metodo multiplo".
Trasforma l'origine
Il transfrom origine - come suggerisce il nome - è usato per controllare il punto di partenza della trasformazione. Se non dichiariamo esplicitamente questa proprietà con la seguente sintassi trasformazione-origine: X Y;, quindi il browser assumerà il valore predefinito che è 50% per X e 50% per Y.
Ora, se specifichiamo il trasformare origine a 0 (X) 0 (Y) la trasformazione inizierà in alto a sinistra.
Ancora una volta, tutti i browser hanno ancora bisogno della versione del prefisso per chiamare questa proprietà. Quindi, ecco la versione completa per assicurarti che funzioni nella maggior parte dei browser attuali:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-trasforma-origine: X Y; -ms-transform-origin: X Y; trasformazione-origine: X Y;
- Demo "Transform-origin"
Conclusione
Abbiamo attraversato tutti e quattro i metodi di trasformazione essenziali; tradurre, ridimensionare, ruotare e inclinare
Tuttavia, come accennato, questo modulo è ancora nella fase iniziale, quindi se applicherete questi metodi nel vostro prossimo sito web, assicuratevi che degradi con garbo per i browser incompatibili (non mi riferisco a IE6 qui).
Infine, è possibile visualizzare tutte le demo o scaricare la fonte dai seguenti link.
- dimostrazione
- Scarica fonte
