Исполняемые доки CSS: Transform в CSS

Q: Что делает transform в CSS?

Меняет то, как элемент рисуется: сдвигает (translate), меняет размер (scale), поворачивает (rotate) или наклоняет (skew). Элемент сохраняет исходное место в раскладке, поэтому элементы вокруг не сдвигаются.

Q: Как применить несколько трансформаций в CSS?

Перечислите их в одном значении transform через пробел: transform: translateX(50px) rotate(20deg) scale(1.2);. Второе объявление transform заменяет первое, а не добавляется к нему.

Что делает transform

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 30px 20px; }
    .slot { outline: 2px dashed #9ca3af; width: 90px; height: 60px; }
    .box { width: 90px; height: 60px; background: #2563eb; color: white; display: grid; place-items: center; }
    .t1 { transform: translate(20px, 10px); }
    .t2 { transform: scale(1.3); background: #16a34a; }
    .t3 { transform: rotate(20deg); background: #f59e0b; color: #111827; }
    .t4 { transform: skewX(-20deg); background: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="slot"><div class="box t1">translate</div></div>
    <div class="slot"><div class="box t2">scale</div></div>
    <div class="slot"><div class="box t3">rotate</div></div>
    <div class="slot"><div class="box t4">skewX</div></div>
  </div>
</body>
</html>

translate(20px, 10px) сдвигает синий блок на 20px вбок и на 10px вниз. scale(1.3) увеличивает зеленый на 30% вокруг его центра. rotate(20deg) поворачивает янтарный по часовой стрелке, а skewX(-20deg) наклоняет темный. Во всех случаях пунктирное место, то есть пространство, которое элемент занимает в раскладке, остается ровно там же.

Функции transform

Функция	Что делает	Пример
`translate(x, y)`	сдвигает	`translate(20px, -10px)`, `translate(-50%, -50%)`
`translateX(x)` / `translateY(y)`	сдвигает по одной оси	`translateY(-4px)`
`scale(s)` / `scale(x, y)`	меняет размер (1 = исходный, 0.5 = половина, отрицательное отражает)	`scale(1.1)`, `scale(-1, 1)`
`scaleX(s)` / `scaleY(s)`	меняет размер по одной оси	`scaleX(0.5)`
`rotate(angle)`	поворачивает по часовой стрелке (отрицательное = против)	`rotate(45deg)`, `rotate(0.25turn)`
`skew(x, y)` / `skewX(a)` / `skewY(a)`	наклоняет	`skewX(-15deg)`
`matrix(a, b, c, d, e, f)`	все перечисленное одной матрицей, чаще всего это то, что возвращает браузер
`none`	без трансформации

Проценты в translate() считаются от собственного размера элемента, а не от родителя. У поворота своя страница с градусами, оборотами и вращением: поворот rotate в CSS.

Песочница transform

Двигайте ползунки. Первая строка это собранное значение transform; вторая это матрица, которую из него вычислил браузер, именно ее getComputedStyle возвращает для любой трансформации:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 16px; }
    .stage { height: 170px; display: grid; place-items: center; background: #f3f4f6; margin: 10px 0; overflow: hidden; }
    #box { width: 80px; height: 80px; background: #2563eb; color: white; display: grid; place-items: center; border-radius: 6px; }
    code { display: block; }
  </style>
</head>
<body>
  <div class="controls">
    <label>translateX <input type="range" data-f="translateX" data-u="px" min="-120" max="120" value="0"></label>
    <label>scale <input type="range" data-f="scale" data-u="" min="0.5" max="1.8" step="0.1" value="1"></label>
    <label>rotate <input type="range" data-f="rotate" data-u="deg" min="-180" max="180" value="0"></label>
    <label>skewX <input type="range" data-f="skewX" data-u="deg" min="-40" max="40" value="0"></label>
  </div>
  <div class="stage"><div id="box">Box</div></div>
  <code id="value"></code>
  <code id="matrix"></code>
  <script>
    const box = document.getElementById('box');
    const inputs = document.querySelectorAll('input');
    const update = () => {
      const t = [...inputs].map((i) => i.dataset.f + '(' + i.value + i.dataset.u + ')').join(' ');
      box.style.transform = t;
      document.getElementById('value').textContent = 'transform: ' + t + ';';
      document.getElementById('matrix').textContent = 'computed: ' + getComputedStyle(box).transform;
    };
    inputs.forEach((i) => i.addEventListener('input', update));
    update();
  </script>
</body>
</html>

Трансформации не сдвигают раскладку

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No reflow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 10px; padding: 24px 10px; }
    .row div { width: 80px; height: 50px; background: #e5e7eb; display: grid; place-items: center; }
    .row .grow-t { transform: scale(1.5); background: #16a34a; color: white; }
    .row .grow-w { width: 120px; height: 75px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row" id="a"><div>A</div><div class="grow-t">scale(1.5)</div><div id="c1">C</div></div>
  <div class="row" id="b"><div>A</div><div class="grow-w">width 120px</div><div id="c2">C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'C starts at x = ' + document.getElementById('c1').offsetLeft + 'px next to the scaled box, and at x = ' +
      document.getElementById('c2').offsetLeft + 'px next to the resized one.';
  </script>
</body>
</html>

Оба средних блока выглядят в 1.5 раза больше. Увеличенный через scale перекрывает соседей, и C остается на месте; увеличенный через width и height отодвигает C на 40px дальше.

Несколько трансформаций и их порядок

Поместите несколько функций в один transform через пробел. Порядок меняет результат, потому что, если читать слева направо, каждая функция работает в системе координат, которую оставили предыдущие:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transform order</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .stage { position: relative; height: 170px; background: #f3f4f6; }
    .box { position: absolute; top: 20px; left: 20px; width: 60px; height: 40px; opacity: 0.85; }
    .a { transform: translateX(120px) rotate(45deg); background: #2563eb; }
    .b { transform: rotate(45deg) translateX(120px); background: #16a34a; }
  </style>
</head>
<body>
  <div class="stage"><div class="box a"></div><div class="box b"></div></div>
  <p id="out"></p>
  <script>
    const center = (el) => { const r = el.getBoundingClientRect(); return Math.round(r.left + r.width / 2) + ', ' + Math.round(r.top + r.height / 2); };
    document.getElementById('out').textContent =
      'blue (translate then rotate) center: ' + center(document.querySelector('.a')) +
      '  |  green (rotate then translate) center: ' + center(document.querySelector('.b'));
  </script>
</body>
</html>

Синий блок сдвинулся на 120px прямо и затем повернулся на месте. Зеленый сначала повернулся, поэтому его «ось x» смотрит по диагонали, и translateX(120px) сдвигает его вниз по диагонали. Те же функции, другое место.

Вторая ловушка: второе объявление transform заменяет первое. Если у карточки transform: rotate(-2deg), а в правиле наведения transform: scale(1.05), при наведении поворот исчезает. Повторите обе функции (rotate(-2deg) scale(1.05)) или используйте отдельные свойства ниже.

transform-origin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 20px 30px 40px; }
    .slot { outline: 2px dashed #9ca3af; width: 80px; height: 50px; }
    .box { width: 80px; height: 50px; background: #2563eb; transform: rotate(25deg); }
    .tl { transform-origin: top left; }
    .br { transform-origin: bottom right; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>center</code><div class="slot"><div class="box"></div></div></div>
    <div><code>top left</code><div class="slot"><div class="box tl"></div></div></div>
    <div><code>bottom right</code><div class="slot"><div class="box br"></div></div></div>
  </div>
</body>
</html>

Все три блока поворачиваются на 25 градусов. Первый вращается вокруг середины, второй держит левый верхний угол прикрепленным к углу своего места, третий правый нижний. Выпадающее меню, которое вырастает из своей кнопки, использует transform-origin: top вместе со scale().

Свойства translate, scale и rotate

В современных браузерах есть еще три отдельных свойства, которые делают то же, что функции, но их можно задавать и анимировать независимо:

.card {
  rotate: -2deg;
  transition: scale 0.2s ease-out;
}
.card:hover {
  scale: 1.05;   /* the rotation stays, because it is a different property */
}

Они всегда объединяются так, будто записаны как transform: translate(...) rotate(...) scale(...) перед любым значением transform, в каком бы порядке вы их ни объявили. Обратите внимание на синтаксис: translate: 10px 20px и scale: 1.2 принимают значения без скобок функции.

Центрирование через translate(-50%, -50%)

Проценты в translate() считаются от собственного размера элемента, поэтому top: 50%; left: 50%; transform: translate(-50%, -50%) центрирует абсолютно позиционированный элемент любого размера в родителе. На странице выравнивание div по центру этот способ сравнивается с flexbox и grid.

Частые ошибки

Два объявления transform. Более позднее побеждает целиком. Объединяйте функции или используйте свойства rotate, scale и translate.
Трансформация строчного элемента. Простой <span> или <a> игнорирует transform. Сделайте его inline-block.
Ожидание, что соседи сдвинутся. Трансформации никогда не меняют раскладку. Чтобы освободить место, меняйте width, margin или gap.
Неправильный порядок функций. rotate() перед translate() сдвигает вдоль повернутой оси.
Сюрпризы с дочерними элементами position: fixed. Трансформированный элемент становится содержащим блоком для фиксированных потомков, поэтому фиксированная шапка внутри него прокручивается вместе с ним. Он также создает новый контекст наложения для z-index.

Часто задаваемые вопросы

Что делает transform в CSS?

Меняет то, как элемент рисуется: сдвигает (translate), меняет размер (scale), поворачивает (rotate) или наклоняет (skew). Элемент сохраняет исходное место в раскладке, поэтому элементы вокруг не сдвигаются.

Как применить несколько трансформаций в CSS?

Перечислите их в одном значении transform через пробел: transform: translateX(50px) rotate(20deg) scale(1.2);. Второе объявление transform заменяет первое, а не добавляется к нему.

Важен ли порядок функций transform?

Да. Если читать слева направо, каждая функция работает в осях, которые оставили предыдущие, поэтому rotate(45deg) translateX(100px) сдвигает элемент вдоль повернутой оси, а translateX(100px) rotate(45deg) сдвигает прямо и затем поворачивает.

Что такое transform-origin?

Неподвижная точка, вокруг которой происходят масштабирование, поворот и наклон. По умолчанию это центр (50% 50%). transform-origin: top left заставляет элемент расти из левого верхнего угла или поворачиваться вокруг него.

Почему transform не работает на span?

Трансформации не применяются к незамещаемым строчным элементам вроде простого <span> или <a>. Задайте элементу display: inline-block или block, и трансформация заработает.

Связанные концепции