Генератор CSS transform
Двигайте ползунки, чтобы сдвинуть, повернуть, масштабировать и наклонить блок, и скопируйте свойство transform. Пунктирный контур показывает, где блок был до преобразования, а тот же результат дан и одной функцией matrix().
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Двигайте ползунки сдвига, поворота, масштаба и наклона. Снимите галочку «Одинаковый масштаб по X и Y», чтобы растянуть блок по одной оси.
- Выберите точку преобразования, если блок должен поворачиваться вокруг угла или края.
- Скопируйте CSS или запись через matrix().
Как это работает
Каждая составляющая, отличная от нейтральной, становится функцией: translate(x, y), rotate(angle), scale(x, y) и skew(x, y). Матрица — произведение их матриц в том же порядке. Точка (x, y) переходит в (a·x + c·y + e, b·x + d·y + f), где matrix(a, b, c, d, e, f).
Разобранный пример
У rotate(90deg) cos 90° = 0 и sin 90° = 1, поэтому его матрица — matrix(0, 1, -1, 0, 0, 0). Если сначала добавить сдвиг, translate(10px, 20px) scale(2) даёт matrix(2, 0, 0, 2, 10, 20): масштаб делает a и d равными 2, а сдвиг попадает в e и f.
Советы
- Для анимаций берите transform и opacity: эти свойства браузер анимирует без пересчёта раскладки.
- Поворот больше 360° имеет смысл только в анимации; статичный rotate(370deg) выглядит как rotate(10deg).
- Проценты в translate считаются от размеров самого элемента, а не родителя; этот генератор использует пиксели.
Частые вопросы
Важен ли порядок функций в transform?
Да. Функции применяются в порядке записи, каждая — в системе координат, которую оставили предыдущие, поэтому translate, затем rotate — не то же самое, что rotate, затем translate. Этот генератор всегда пишет translate, rotate, scale, skew — порядок, которого ждёт большинство вёрсток.
Что меняет transform-origin?
Это неподвижная точка для rotate, scale и skew. По умолчанию — центр; при top left блок поворачивается вокруг своего угла. На translate она не влияет.
Сдвигает ли transform другие элементы?
Нет. Преобразованный элемент сохраняет своё место в раскладке и только рисуется в другом месте, поэтому transform так дёшево анимировать.
Зачем нужна matrix()?
Она упаковывает всё двумерное преобразование в шесть чисел — именно так его возвращает getComputedStyle. Обе записи рядом помогают читать вычисленные стили и сверяться с кодом из графического редактора.