Справочник HTML & CSS

translate, rotate, scale

Отдельные свойства для сдвига, поворота и масштаба — вместо функций в `transform`.

Синтаксис

translate: x y; rotate: angle; scale: factor;

Значения

Параметр	Тип	Описание
translate	length	Сдвиг: `translate: 10px 20px`.
rotate	angle	Поворот: `rotate: 45deg`.
scale	number	Масштаб: `scale: 1.2`.

Примеры

Поворот и масштаб анимируются независимо:

<style>
  .icon { display: inline-block; font-size: 32px; transition: rotate 0.3s, scale 0.3s; }
  .icon:hover { rotate: 90deg; scale: 1.3; }
</style>
 
<span class="icon">⚙</span> Hover over the gear

Примечания

Каждое свойство можно менять и анимировать отдельно, не повторяя остальные, — с одним transform это неудобно. Применяются они в порядке сдвиг, поворот, масштаб, затем transform. Поддерживаются всеми актуальными браузерами.

См. также

transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.
transition — Плавно анимирует изменение свойства от старого значения к новому.

Вопросы и ответы по теме

В учебнике

Трансформации — Свойство transform — сдвиг, поворот, масштаб и наклон элемента, точка опоры transform-origin и отдельные свойства translate, rotate, scale.

Спасибо, что читаете!