Свойство transform позволяет перемещать, масштабировать, поворачивать и наклонять элемент визуально — без влияния на макет документа (другие элементы не смещаются). Оно ускоряется графическим процессором, что делает его идеальным для анимации.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.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, трансформация влияет только на отрисованный внешний вид элемента, а не на его поле в потоке — поэтому окружающие элементы остаются на месте, и нет переформатирования. Именно поэтому трансформации работают плавно.
/* 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); }
Трюк translate(-50%, -50%) для центрирования повсеместен — он смещает элемент назад на половину его собственного размера.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Поскольку трансформации пропускают макет и отрисовку (только композитинг), анимация остаётся на 60fps — намного дешевле, чем анимирование позиции/размера.
Трансформации — это основа CSS-анимации и микровзаимодействий (наведение, модали, карусели, спиннеры загрузки).
Они перемещают/масштабируют/поворачивают без срабатывания макета, поэтому они одновременно мощные и производительные — рекомендуемый способ анимирования движения в Интернете.