Savybė transform jums leidžia perkelti, keisti mastelį, suktis ir pakreipti elementą vaizdualiniu būdu — nedarant įtakos dokumento maketui (kiti elementai nepersikeičia). Tai GPU greitintinas, todėl idealus animacijai.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Daugkartinės funkcijos taikomos nuosekliai; keičiant tvarką keičiasi rezultatas (suktis, tada perkelti skyrasi nuo perkėlimo, tada suktis).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Skirtingai nei keičiant width/margin, transform daro įtaką tik elemento nupieštam išvaizdui, o ne jo dėžutei tėkmėje — todėl aplinkiniai elementai lieka vietoje ir nėra pakartotinio maketavimo. Tai tiksliai, kodėl transforms yra sklandūs.
/* 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); }
Centravimo triukas translate(-50%, -50%) yra visur — jis elemento padėtį grąžina atgal pusę jo paties dydžio.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Nes transforms aplenkia maketavimą ir piešimą (tik sudėjimas), jų animavimas išlieka 60fps — daug pigesnis nei pozicijos/dydžio animavimas.
Transforms yra CSS animacijos ir mikro-sąveikos darbinė arklis (hover lifts, modals, karuselės, įkėlimo sukamukai).
Jie perkeliami/keičia mastelį/sukasi be maketavimo sukelimo, todėl jie yra tiek galingi, tiek efektyvūs — rekomenduojamas būdas animuoti judėjimą žiniatinklyje.