Transformați generatorul CSS3: scalați, rotiți, traduceți și înclinați

CSS3.0 Transform

Generator de transformare CSS pentru oameni leneși.

Setați scara, rotiți, traduceți și înclinați și urmăriți previzualizarea live pentru a obține vizualizarea dorită.

Evitați să setați valori extreme pentru proprietatea skew, deoarece previzualizarea ar putea acoperi panoul de setări. În această situație va trebui să reîmprospătați pagina.

 

Scalați, rotiți, traduceți și înclinați

Scala funcționează ca și cum ați mări și micșora elementul vizat. Valoarea implicită a scării este 1, care funcționează ca un multiplicator al mărimii originale. Aceasta înseamnă că 0,5 jumătăți în timp ce 2 dublează secțiunea.

 

Rotiți elementul în sensul acelor de ceasornic cu a doua proprietate care este setată în grade. Întoarcerea cu 180° pune obiectul cu susul în jos, în timp ce luarea la 360° revine la poziția sa verticală inițială. Setați orice valoare pozitivă sau negativă sau chiar zecimale.

 

Translate deplasează elementul cu pixeli raportați la poziția sa inițială. Valoarea X pe orizontală în timp ce Y pe verticală atunci când există atributul de rotire este zero.

 

Înclinați obiectele pe axa lor orizontală (X) sau verticală (Y).

 

Transformarea CSS explicată 

Proprietatea de transformare CSS vă permite să rotiți, să scalați, să înclinați și să traduceți un element. Modifică spațiul de coordonate al modelului de formatare vizuală CSS.

Definiție și utilizare

Proprietatea de transformare aplică o transformare 2D sau 3D unui element. Această proprietate vă permite să rotiți, să scalați, să mutați, să înclinați, etc., elemente.

Suport pentru browser

Numerele din tabel specifică prima versiune de browser care acceptă pe deplin proprietatea.

Numerele urmate de -webkit-, -moz- sau -o- specifică prima versiune care a funcționat cu un prefix.

Sintaxă
transform: none|transform-functions|initial|inherit;