Трансформации

Трансформация изменяет то, как элемент нарисован: сдвигает, поворачивает, увеличивает или наклоняет его. Место в раскладке при этом не меняется — соседи ничего не замечают. Поэтому трансформации быстрые и отлично подходят для анимаций.

Сдвиг

Свойство transform принимает одну или несколько функций. translate(x, y) сдвигает элемент по горизонтали и вертикали:

<style>
  .box { width: 120px; padding: 12px; background: lightskyblue; }
  .moved { transform: translate(60px, 10px); background: gold; }
</style>
 
<div class="box">На месте</div>
<div class="box moved">Сдвинут</div>
<div class="box">Сосед не сдвинулся</div>

Жёлтый блок наехал на нижний: для раскладки он всё ещё стоит на прежнем месте.

Поворот и масштаб

rotate() поворачивает элемент на угол в градусах (deg), положительный угол — по часовой стрелке. scale() увеличивает или уменьшает: 1.5 — в полтора раза больше, 0.5 — вдвое меньше:

<style>
  .row { display: flex; gap: 40px; padding: 20px; }
  .row div { width: 70px; height: 70px; background: mediumpurple; color: white; display: grid; place-items: center; }
  .r { transform: rotate(20deg); }
  .s { transform: scale(1.3); }
</style>
 
<div class="row">
  <div>Как есть</div>
  <div class="r">rotate</div>
  <div class="s">scale</div>
</div>

Все функции

Проценты в translate() считаются от размера самого элемента: translate(-50%, -50%) сдвигает его на половину собственной ширины и высоты.

Вместе с переходом

Трансформации чаще всего анимируют. Наведите курсор на карточку:

<style>
  .card { width: 160px; padding: 16px; background: honeydew; border: 1px solid seagreen; transition: transform 0.3s; }
  .card:hover { transform: translateY(-6px) scale(1.05); }
</style>
 
<div class="card">Приподнимаюсь</div>

translateY() — сдвиг только по вертикали; есть и translateX().

Точка опоры

По умолчанию поворот и масштаб идут от центра элемента. transform-origin переносит точку опоры, например в левый верхний угол:

<style>
  .row { display: flex; gap: 60px; padding: 10px 10px 50px; }
  .row div { width: 70px; height: 70px; background: coral; transform: rotate(30deg); }
  .corner { transform-origin: top left; }
</style>
 
<div class="row">
  <div></div>
  <div class="corner"></div>
</div>

Левый квадрат повернулся вокруг центра, правый — вокруг своего угла, как дверь на петле.

Отдельные свойства

В современном CSS сдвиг, поворот и масштаб можно задавать отдельными свойствами translate, rotate и scale. Их удобно менять по одному, не переписывая всю строку transform:

<style>
  .box { width: 80px; height: 80px; background: steelblue; rotate: 15deg; transition: scale 0.3s; }
  .box:hover { scale: 1.2; }
</style>
 
<div class="box"></div>

При наведении меняется только scale, а поворот сохраняется.

Частая ошибка

Порядок функций в transform важен: они применяются справа налево, и каждая меняет систему координат для следующей. Сдвиг после поворота уводит элемент по косой:

<style>
  .box { width: 60px; height: 60px; margin: 10px 0 40px; background: gold; }
  .a { transform: translateX(100px) rotate(45deg); }
  .b { transform: rotate(45deg) translateX(100px); }
</style>
 
<div class="box a"></div>
<div class="box b"></div>

Функции те же, а элементы оказались в разных местах. Если результат странный, попробуйте поменять функции местами.