The transform property lets you move, scale, rotate, and skew an element visually — without affecting the document layout (other elements don't shift). It's GPU-accelerated, making it ideal for animation.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
მრავალი ფუნქცია გამოიყენება თანმიმდევრობით; რიგის შეცვლა ფলობას იცვლის (ბრუნვა შემდეგ თარგმნა განსხვავდება თარგმნა შემდეგ ბრუნვისგან).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
width/margin-ის შეცვლისგან განსხვავებით, transform მხოლოდ ელემენტის ხატული გამოჩენას აზემოქმედებს, ის ყუთი ნაკადში არ — აი რომ გარშემო ელემენტები მოთავსდება და არ არის reflow. ეს ზუსტად ის, თუ რატომ არის transforms გლუვი.
/* 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); }
The translate(-50%, -50%) centering trick is ubiquitous — it shifts the element back by half its own size.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
ვინაიდან transforms-ი გამრჩენელი layout-ს და paint-ს (მხოლოდ compositing), მათი animation რჩება 60fps-ზე — გაცილებით იაფი, ვიდრე position/size-ის animation.
Transforms არის CSS animation-ის და micro-interactions-ის სამუშაო ცხენი (hover lifts, modals, carousels, loading spinners).
ისინი გადაადგილებენ/მასშტაბირებენ/ბრუნავენ layout-ის გამოწვევის გარეშე, ასე რომ ისინი ძლიერი და კარგი ფლობის მქონეები არიან — რეკომენდებული გზა motion animation-ის ვებზე.