Transform-origine - CSS-Tricks

transform-originProprietatea este utilizat în conjuncție cu CSS transformă, permițându - vă să schimbați punctul de origine al unui transformare.

.box ( transform: rotate(360deg); transform-origin: top left; )

După cum s-a indicat mai sus, transform-originproprietatea poate lua până la două cuvinte cheie sau lungime separate de spațiu pentru o transformare 2D și până la trei valori pentru o transformare 3D.

Utilizarea codului de mai sus pe o casetă de 200 px cu 200 px, cu transformarea aplicată unei tranziții folosind un eveniment de clic, s-ar comporta astfel:

Verificați acest stilou!

În mod implicit, originea unei transformări este „50% 50%”, care este exact în centrul oricărui element dat. Schimbarea originii în „stânga sus” (ca în demonstrația de mai sus) face ca elementul să utilizeze colțul din stânga sus al elementului ca punct de rotație.

Valorile pot fi lungimi, procente sau cuvinte cheie top, left, right, bottom, și center.

Prima valoare este poziția orizontală, a doua valoare este verticală, iar a treia valoare reprezintă poziția pe axa Z. A treia valoare va funcționa numai dacă utilizați transformări 3D și nu poate fi un procent.

Vedeți ilustrația originii transformării stiloului de Shaw (@shshaw) pe CodePen.