Генератор CSS transform

Выберите пример в галерее, добавьте функции кнопкой «Добавить функцию» или вставьте свой transform в поле «Свой transform» — функции разложатся по вкладкам. Порядок меняется перетаскиванием вкладок (или Alt + ←/→), «Обратный порядок» переворачивает весь список. Номер на контуре совпадает с номером функции: контур 1 — результат первой функции, контур 2 — первых двух и так далее. Синий блок — итог, стрелки X и Y — его оси.

Блок можно тянуть мышью или двигать стрелками на клавиатуре: меняется открытая вкладка translate или rotate. «Проиграть по шагам» показывает, как функции выполняются по очереди, а «Анимировать» открывает результат в генераторе анимаций.

Скопируйте правило .box в CSS нужного элемента. Если в списке есть 3D-функции или выбраны карточка либо куб, в CSS появится правило .scene с perspective — его задают родителю элемента. Ссылка сохраняет все настройки.

Функции transform выполняются слева направо, и каждая следующая работает в системе координат, которую уже изменили предыдущие. В записи translate(100px, 0) rotate(45deg) блок сначала сдвигается вправо, а затем поворачивается на месте. В записи rotate(45deg) translate(100px, 0) поворачиваются сами оси, и сдвиг на 100px идёт по диагонали вниз-вправо. Функции одни и те же, а положение блока разное — сравните примеры «Сдвиг, затем поворот» и «Поворот, затем сдвиг».

Так же ведёт себя масштаб: после scale(2) сдвиг translate(50px, 0) перемещает блок на 100px, потому что единица длины тоже увеличилась. Похожее правило действует в CSS-фильтрах: там функции тоже применяются по очереди, и перестановка меняет результат.

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

rotateX(), rotateY() и сдвиг по Z работают в пространстве, но без перспективы выглядят как сжатие. Свойство perspective у родителя задаёт расстояние от зрителя до сцены: 300–600px дают сильное искажение, 1000px и больше — мягкое. Функция perspective() внутри transform действует только на этот элемент; свойство у родителя создаёт общую сцену для всех дочерних элементов.

Карточка с обратной стороной и куб состоят из нескольких граней. Чтобы грани оставались в пространстве, а не сплющивались в плоскость блока, блоку задают transform-style: preserve-3d; у карточки обратную сторону прячет backface-visibility: hidden. perspective-origin у сцены задаёт, откуда смотрит зритель.

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

Свойства translate, rotate и scale задают то же, что функции, но браузер применяет их раньше transform и всегда в порядке translate → rotate → scale, как бы они ни стояли в CSS. Поэтому rotate: 45deg; translate: 100px 0 — это «сдвиг, затем поворот». Переключатель «Вывод» выносит в свойства только то, что не меняет результат, и объясняет, что осталось в transform.

Весь список функций браузер сворачивает в одну матрицу — её показывает DevTools во вкладке Computed. В разделе «Итоговая матрица» видно, что значат её числа: первые два — ось X блока, следующие два — ось Y, последние — сдвиг. Матрицу из DevTools можно вставить в «Свой transform» и разложить обратно на функции.