Ominaisuus transform sallii sinun siirtää, skaalata, kiertää ja vinoutaa elementtiä visuaalisesti — vaikuttamatta asiakirjan asetteluun (muut elementit eivät siirry). Se on GPU-kiihdytetty, mikä tekee siitä ihanteellisen animaatioille.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Useat funktiot käytetään peräkkäin; järjestyksen muuttaminen muuttaa tulosta (kiertäminen ja sitten siirtäminen on eri kuin siirtäminen ja sitten kiertäminen).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Toisin kuin width/margin muuttaminen, muunnos vaikuttaa vain elementin piirrettyyn ulkoasuun, ei sen lokeroon virtauksessa — joten ympäröivät elementit pysyvät paikallaan eikä virtauksen uudelleenarviointia ole. Tämä on juuri syy siihen, miksi muunnokset ovat sileät.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
Keskeisyyksien temppu translate(-50%, -50%) on kaikkialla — se siirtää elementin takaisin puolet sen omasta koosta.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Koska muunnokset ohittavat asettelun ja piirtämisen (vain kompositio), niiden animoiminen pysyy 60 fps:ssä — paljon halvempaa kuin sijainnin/koon animoiminen.
Muunnokset ovat CSS-animaatioiden ja mikro-vuorovaikutusten työhevonen (hover-noustut, modaalit, karussellit, lataussäikeet).
Ne siirtävät/skaalata/kiertävät ilman asettelun laukaisua, joten ne ovat sekä tehokkaita että tehokkaat — suositeltu tapa animoida liikettä verkossa.