Transforma - CSS-Tricks

transformProprietatea vă permite să manipuleze vizual un element de strâmbă, rotire, traducere, sau scalare:

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

Chiar și cu înălțimea și lățimea declarate, acest element va fi acum scalat la douăzeci de ori dimensiunea inițială:

Vedeți explicația Transformare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

Acordând această funcție două valori o va întinde orizontal pe prima și pe verticală pe a doua. În exemplul de mai jos, elementul va avea acum dublul lățimii, dar jumătate din înălțimea elementului original:

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

Sau puteți fi mai specific fără a utiliza funcția de prescurtare:

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

Dar scale()este doar una dintre numeroasele funcții de transformare disponibile:

Valori

• scale(): Afectează dimensiunea elementului. Acest lucru este valabil și pentru font-size, padding, heightși widtha unui element, de asemenea. Este, de asemenea, o funcție de prescurtare pentru funcțiile scaleXși scaleY.
• skewX()și skewY(): înclină un element spre stânga sau spre dreapta, cum ar fi transformarea unui dreptunghi într-un paralelogram. skew()este o stenografie care combină skewX()și skewYacceptând ambele valori.
• translate(): Mută ​​un element lateral sau în sus și în jos.
• rotate(): Rotește elementul în sensul acelor de ceasornic din poziția sa actuală.
• matrix(): O funcție care probabil nu este destinată a fi scrisă manual, dar combină toate transformările într-una singură.
• perspective(): Nu afectează elementul în sine, ci afectează transformările transformărilor 3D ale elementelor descendente, permițându-le tuturor să aibă o perspectivă de adâncime consistentă.

Oblic

/* 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); )

Funcțiile skewXși skewYtransformarea înclină un element într-un fel sau altul. Amintiți-vă: nu există nicio proprietate stenogramă pentru înclinarea unui element, deci va trebui să utilizați ambele funcții. În exemplul de mai jos, putem distorsiona un pătrat de 100px x 100px la stânga și la dreapta cu skewX:

Vedeți explicația Transformare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

În timp ce în acest exemplu putem distorsiona un element vertical cu skewY:

Vedeți explicația Transformare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

Acum să folosim skew()pentru a combina cele două:

Vedeți
proprietatea stenogramă Pen skew () de către CSS-Tricks (@ css-tricks)
pe CodePen.

Roti

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

Aceasta rotește un element în sensul acelor de ceasornic față de poziția sa inițială, în timp ce o valoare negativă l-ar roti în direcția opusă. Iată un exemplu animat simplu în care un pătrat continuă să se rotească la 360 de grade la fiecare trei secunde:

Vedeți explicația Transformare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

Putem folosi , de asemenea rotateX, rotateYși rotateZfuncțiile, astfel:

Vedeți explicația Transformare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

Traduceți

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

Această funcție de transformare deplasează un element lateral, sau în sus și în jos. De ce nu folosiți doar sus / stânga / jos / dreapta? Ei bine, uneori este cam confuz. M-aș gândi la acestea ca la aspect / poziționare (oricum au suport mai bun pentru browser) și aceasta ca o modalitate de a muta acele lucruri ca parte a unei tranziții sau animații.

Aceste valori ar fi orice valoare a lungimii, cum ar fi 10px sau 2.4em. O valoare va muta elementul spre dreapta (valori negative spre stânga). Dacă este furnizată o a doua valoare, acea a doua valoare o va muta în jos (valori negative în sus). Sau, puteți obține specific:

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

Este important să rețineți că un element care folosește transformnu va face ca alte elemente să curgă în jurul său. Folosind translatefuncția de mai jos și scoțând pătratul verde din poziția sa inițială, vom observa cum textul din jur va rămâne fixat, ca și cum pătratul este un element bloc:

Vedeți explicația Transformare stilou de CSS-Tricks (@ css-tricks) pe CodePen.

De asemenea, merită menționat faptul că translateva fi accelerat hardware dacă doriți să animați acea proprietate, spre deosebire de position: absolute.

Valori multiple

Cu o listă separată de spațiu puteți adăuga mai multe valori la transformproprietate:

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

Este demn de remarcat faptul că există o ordine în care aceste transformări vor fi efectuate, în exemplul de mai sus „skew” va fi efectuat mai întâi și apoi elementul va fi scalat.

Matrice

Funcția de matrixtransformare poate fi utilizată pentru a combina toate transformările într-o singură. Este un pic ca stenograma transformării, doar că nu cred că este destinat să fie scris de mână. Există instrumente, cum ar fi Rezoluțiile matricei, care pot converti un grup de transformări într-o singură declarație matricială. Poate că, în anumite situații, acest lucru poate reduce dimensiunea fișierului, deși astfel de micro-optimizări neprietenoase pentru autor nu probabil că merită timpul tău.

Pentru curioși, aceasta:

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

poate fi reprezentat și ca:

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

Transformări 3D

Majoritatea proprietăților de mai sus au versiuni 3D ale acestora.

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

A treia valoare în translate3dsau valoarea în translateZmută elementul spre vizualizator, valorile negative sunt departe.

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

A treia valoare scale3dsau valoarea în scaleZafectează scalarea de-a lungul axei Z (de exemplu, linia imaginară care iese direct din ecran).

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

rotateXși rotateYva roti un element în spațiul 3D în jurul acelor axe. rotate3dvă permite să specificați un punct din spațiul 3D în care să rotiți elementul în jur.

matrix3d(… )

O modalitate de a descrie programatic o transformare 3D într-o grilă 4 × 4. Nimeni nu va da vreodată mâna să scrie una dintre acestea vreodată.

perspective(value)

Această valoare nu afectează elementul în sine, dar afectează transformările transformărilor 3D ale elementelor descendente, permițându-le tuturor să aibă o perspectivă de adâncime consistentă.

Mai multe informatii

• Documente MDN despre transformare și utilizare.
• Documentația lui David DeSandro despre transformările 3D
• Surfin 'Safari: transformări 3D
• Specificațiile W3C privind transformările CSS3
• Introducere în transformările CSS 3D

Suport pentru browser

Transformări 2D

Crom	Safari	Firefox	Operă	IE	Android	iOS
Orice	3.1+	3.5+	10.5+	9+	4.1+	Cel puțin 4

Transformări 3D

Crom	Safari	Firefox	Operă	IE	Android	iOS
Peste 10 ani	4+	12+	nici unul	Peste 10 ani	4.1+	5+

Prefixe pentru furnizor

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