Trasformare - Trucchi CSS

La transformproprietà consente di manipolare visivamente un elemento inclinando, ruotando, traslando o ridimensionando:

.element ( width: 20px; height: 20px; transform: scale(20); )

Anche con un'altezza e una larghezza dichiarate, questo elemento verrà ora ridimensionato a venti volte la sua dimensione originale:

Vedere la spiegazione di Pen Transform di CSS-Tricks (@ css-tricks) su CodePen.

Dare a questa funzione due valori la allungherà orizzontalmente per il primo e verticalmente per il secondo. Nell'esempio seguente l'elemento sarà ora il doppio della larghezza ma la metà dell'altezza dell'elemento originale:

.element ( transform: scale(2, .5); )

Oppure puoi essere più specifico senza utilizzare la funzione abbreviazione:

transform: scaleX(2); transform: scaleY(.5);

Ma scale()è solo una delle tante funzioni di trasformazione disponibili:

Valori

• scale(): Influisce sulla dimensione dell'elemento. Questo vale anche per il font-size, padding, height, e widthdi un elemento, anche. È anche una funzione abbreviata per le funzioni scaleXe scaleY.
• skewX()e skewY(): inclina un elemento a sinistra oa destra, come trasformare un rettangolo in un parallelogramma. skew()è una scorciatoia che combina skewX()e skewYaccetta entrambi i valori.
• translate(): Sposta un elemento lateralmente o su e giù.
• rotate(): Ruota l'elemento in senso orario dalla sua posizione corrente.
• matrix(): Una funzione che probabilmente non è concepita per essere scritta a mano, ma combina tutte le trasformazioni in una.
• perspective(): Non influisce sull'elemento stesso, ma influisce sulle trasformazioni delle trasformazioni 3D degli elementi discendenti, consentendo a tutti di avere una prospettiva di profondità coerente.

Storto

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Le funzioni skewXe skewYtransform inclinano un elemento in un modo o nell'altro. Ricorda: non esiste una proprietà abbreviata per inclinare un elemento, quindi dovrai usare entrambe le funzioni. Nell'esempio seguente, possiamo inclinare un quadrato di 100 x 100 px a sinistra ea destra con skewX:

Vedere la spiegazione di Pen Transform di CSS-Tricks (@ css-tricks) su CodePen.

Mentre in questo esempio possiamo inclinare un elemento verticalmente con con skewY:

Vedere la spiegazione di Pen Transform di CSS-Tricks (@ css-tricks) su CodePen.

Ora usiamo skew()per combinare i due:

Vedi la
proprietà abbreviata Pen skew () di CSS-Tricks (@ css-tricks)
su CodePen.

Ruotare

.element ( transform: rotate(25deg); )

Questo fa ruotare un elemento in senso orario dalla sua posizione originale, mentre un valore negativo lo ruoterebbe nella direzione opposta. Ecco un semplice esempio animato in cui un quadrato continua a ruotare di 360 gradi ogni tre secondi:

Vedere la spiegazione di Pen Transform di CSS-Tricks (@ css-tricks) su CodePen.

Possiamo anche utilizzare le rotateX, rotateYe rotateZfunzioni, in questo modo:

Vedere la spiegazione di Pen Transform di CSS-Tricks (@ css-tricks) su CodePen.

Tradurre

.element ( transform: translate(20px, 10px); )

Questa funzione di trasformazione sposta un elemento lateralmente o su e giù. Perché non usare solo in alto / a sinistra / in basso / a destra? Beh, a volte è un po 'confuso. Penserei a quelli come layout / posizionamento (hanno comunque un supporto migliore per il browser) e questo come un modo per spostare quelle cose come parte di una transizione o animazione.

Questi valori sarebbero qualsiasi valore di lunghezza, come 10px o 2.4em. Un valore sposterà l'elemento a destra (valori negativi a sinistra). Se viene fornito un secondo valore, quel secondo valore lo sposterà verso il basso (valori negativi verso l'alto). Oppure puoi ottenere specifici:

transform: translateX(value); transform: translateY(value);

È importante notare che un elemento che utilizza transformnon farà scorrere altri elementi attorno ad esso. Usando la translatefunzione sottostante e spostando il quadrato verde fuori dalla sua posizione originale, noteremo come il testo circostante rimarrà fisso in posizione, come se il quadrato fosse un elemento di blocco:

Vedere la spiegazione di Pen Transform di CSS-Tricks (@ css-tricks) su CodePen.

Vale anche la pena notare che translatesarà accelerato dall'hardware se si desidera animare quella proprietà, a differenza di position: absolute.

Valori multipli

Con un elenco separato da spazi è possibile aggiungere più valori alla transformproprietà:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Vale la pena notare che esiste un ordine in cui queste trasformazioni verranno eseguite, nell'esempio sopra verrà eseguito prima "skew" e poi l'elemento verrà ridimensionato.

Matrice

La matrixfunzione di trasformazione può essere utilizzata per combinare tutte le trasformazioni in una. È un po 'come trasformare la stenografia, solo che non credo che sia davvero destinato a essere scritto a mano. Ci sono strumenti là fuori come The Matrix Resolutions, che possono convertire un gruppo di trasformazioni in una singola dichiarazione di matrice. Forse in alcune situazioni questo può ridurre le dimensioni del file, anche se micro ottimizzazioni poco amichevoli come questa probabilmente non valgono il tuo tempo.

Per i curiosi, questo:

rotate(45deg) translate(24px, 25px)

può anche essere rappresentato come:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

Trasformazioni 3D

La maggior parte delle proprietà di cui sopra hanno versioni 3D di esse.

translate3d(x, y, z) translateZ(z)

Il terzo valore in translate3do il valore in translateZsposta l'elemento verso lo spettatore, i valori negativi allontanano.

scale3d(sx, sy, sz) scaleZ(sz)

Il terzo valore in scale3do il valore in scaleZinfluisce sul ridimensionamento lungo l'asse z (ad esempio, la linea immaginaria che esce direttamente dallo schermo).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXe rotateYruoterà un elemento nello spazio 3D attorno a quegli assi. rotate3dconsente di specificare un punto nello spazio 3D in cui ruotare l'elemento.

matrix3d(… )

Un modo per descrivere in modo programmatico una trasformazione 3D in una griglia 4 × 4. Nessuno scriverà mai a mano uno di questi, mai.

perspective(value)

Questo valore non influisce sull'elemento stesso, ma influisce sulle trasformazioni delle trasformazioni 3D degli elementi discendenti, consentendo a tutti di avere una prospettiva di profondità coerente.

Maggiori informazioni

• Documenti MDN sulla trasformazione e l'utilizzo.
• Documentazione di David DeSandro sulle trasformazioni 3D
• Surfin 'Safari: trasformazioni 3D
• Specifiche W3C sulle trasformazioni CSS3
• Introduzione alle trasformazioni 3D CSS

Supporto browser

Trasformazioni 2D

Cromo	Safari	Firefox	musica lirica	IE	Android	iOS
Qualunque	3.1+	3.5+	10.5+	9+	4.1+	Almeno 4

Trasformazioni 3D

Cromo	Safari	Firefox	musica lirica	IE	Android	iOS
10+	4+	12+	nessuna	10+	4.1+	5+

Prefissi del fornitore

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )