Generator transform CSS (2D și 3D)

Exemple de transform CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Rotit 45° Rotire simplă în jurul centrului.

.element {
  transform: rotate(45deg);
}

Zoom la hover Cardul crește puțin când treci cu mouse-ul peste el.

.card {
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.1);
}

Înclinat skewX dă un aspect dinamic etichetelor și bannerelor.

.element {
  transform: skewX(-15deg);
}

Oglindit O valoare negativă la scale întoarce elementul ca în oglindă.

.element {
  transform: scale(-1, 1);
}

Card 3D Perspectivă și rotire pe două axe.

.element {
  transform: perspective(800px) rotateX(10deg) rotateY(25deg);
}

Centrare absolută Elementul se mută cu jumătate din propria mărime, ca să stea exact în centru.

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Rotit din colț Cu transform-origin elementul se rotește în jurul colțului stânga sus.

.element {
  transform: rotate(20deg);
  transform-origin: top left;
}

Cum folosești generatorul de transform

Mută glisoarele translate X și Y (în px), rotate (în grade), scale și skew X și Y.
Bifează oglindire orizontală ca să întorci elementul ca într-o oglindă.
Pentru 3D, setează perspective și rotește cu rotateX și rotateY.
Alege transform-origin, punctul în jurul căruia se rotește și se scalează elementul. Conturul estompat arată poziția inițială.

Ordinea funcțiilor contează

Fiecare funcție lucrează în sistemul de coordonate lăsat de cea dinainte. Dacă rotești întâi, axa X se rotește și ea, iar mutarea se face pe diagonală.

.a { transform: translateX(100px) rotate(45deg); } /* se mută la dreapta, apoi se rotește pe loc */
.b { transform: rotate(45deg) translateX(100px); } /* se mută pe diagonală */

transform-origin are implicit valoarea center. Cu top left, o rotație învârte elementul în jurul colțului din stânga sus. Oglindirea orizontală este de fapt scaleX(-1).

Transformări 3D

Fără perspectivă, rotateY() doar îngustează elementul. perspective() pus primul în listă (sau proprietatea perspective pe părinte) adaugă adâncimea: valorile mici, ca 400px, dau un efect puternic, cele mari, ca 1500px, unul discret.

.card-3d {
  transform: perspective(800px) rotateY(25deg) rotateX(10deg);
}

Proprietățile separate translate, rotate și scale

Browserele moderne acceptă și proprietățile individuale translate, rotate și scale. Le poți schimba independent, de exemplu doar scale la hover, fără să rescrii tot transform-ul. Se aplică mereu în ordinea translate, rotate, scale, iar transform vine după ele.

.icon {
  rotate: 15deg;
  transition: scale 0.2s;
}
.icon:hover {
  scale: 1.2;
}

Întrebări frecvente

Transform-ul mută celelalte elemente din pagină?

Nu. Elementul transformat își păstrează locul în layout, iar vecinii nu se mută; doar desenul lui se deplasează. De aceea transform-ul e potrivit pentru animații.

De ce textul devine neclar după transform?

Valorile fracționare (de exemplu translate(10.5px)) sau scalarea pot da text ușor încețoșat. Rotunjește deplasările la pixeli întregi.