ПаветтаГенератор CSS transform
Свойство transform двигает, вращает, масштабирует и наклоняет элемент, не трогая соседей: страница не перестраивается, поэтому анимировать его дёшево. Инструмент собирает все функции сразу — сдвиг по трём осям, поворот, масштаб, наклон — и показывает результат на карточке.
Предпросмотр
Трансформации
Готовый CSS
Разобрать чужое значение
Что делает transform и почему это дёшево
Свойство transform двигает, поворачивает, масштабирует и наклоняет элемент, не трогая соседей. Страница при этом не пересчитывает раскладку: браузер обрабатывает трансформацию на этапе композиции, часто силами видеокарты. Поэтому анимировать transform дёшево, а анимировать left или width дорого — второе заставляет пересчитывать положение всех элементов.
Функции пишутся списком и применяются справа налево: запись translateX(50px) rotate(30deg) сначала повернёт элемент, потом сдвинет уже повёрнутый. Поменяйте порядок — получите другой результат. Инструмент собирает сдвиг по трём осям, поворот, масштаб и наклон и показывает итог сразу.
Точка отсчёта задаётся свойством transform-origin. По умолчанию это центр элемента, но её можно сдвинуть в угол — тогда поворот пойдёт вокруг угла, как у открывающейся двери. Для трёхмерных поворотов добавляется perspective: без неё вращение по X и Y выглядит плоским сжатием.
| Функция | Что делает | Пример |
|---|---|---|
| translate | Сдвигает | translate(10px, 20px) |
| rotate | Поворачивает | rotate(45deg) |
| scale | Масштабирует | scale(1.2) |
| skew | Наклоняет | skew(10deg) |
| perspective | Задаёт глубину | perspective(600px) |
От аффинных матриц до мобильного Safari
Математика за трансформациями — аффинные преобразования, описанные в линейной алгебре задолго до компьютеров. Любой сдвиг, поворот, масштаб и наклон записывается одной матрицей, и последовательность преобразований сводится к их перемножению. Именно поэтому у CSS есть функция matrix, куда можно вписать шесть чисел напрямую.
В графику это пришло через машинную инженерию шестидесятых. Айвен Сазерленд в 1963 году показал Sketchpad — систему, где фигуры на экране можно было двигать и поворачивать световым пером, а машина пересчитывала координаты. Все последующие графические редакторы наследуют его подход.
В CSS трансформации попали через мобильный Safari: Apple предложила -webkit-transform в 2007 году для интерфейсов iPhone, где анимация обязана идти плавно на слабом процессоре. Спецификация CSS Transforms стала рекомендацией позже, но префиксная версия разошлась по вебу задолго до этого. Отдельная спецификация CSS Transforms Level 2 добавила трёхмерные функции и свойство transform-style, которым включают настоящую сцену с глубиной для дочерних элементов.
Как собрать набор функций и не сломать поток
Соберите нужный набор функций и следите за порядком: он меняет результат. Для наведения курсора обычно хватает лёгкого scale около 1,02–1,05 — больше воспринимается как рывок. Поворот на малые углы удобен для иконок и бейджей, крупные повороты в интерфейсе почти всегда мешают читать.
Трансформация не влияет на раскладку: сдвинутый элемент оставляет за собой пустое место и может наехать на соседа. Если нужно именно подвинуть блок в потоке, меняйте отступы. Добавить движение во времени поможет генератор анимации, а тень под приподнятой карточкой соберёт генератор box-shadow. Отдельно стоит will-change: это подсказка браузеру заранее вынести элемент на свой слой. Помогает на тяжёлых анимациях, но ставить его на десятки элементов вредно — каждый слой занимает видеопамять. Значение none сбрасывает все функции разом — удобно для состояния по умолчанию, от которого элемент отталкивается при наведении или в анимации.
Смотрите на результат в движении: статичный кадр обманывает. Поворот на пятнадцать градусов в покое выглядит небрежно, а как промежуточная фаза анимации читается нормально. Поэтому декоративные трансформации почти всегда стоит вешать на состояние наведения или на кадры анимации.
| Основа | аффинные преобразования |
| Запись матрицей | matrix(a, b, c, d, e, f) |
| Порядок применения | справа налево |
| Точка отсчёта | transform-origin |
| По умолчанию | центр элемента |
| Глубина | perspective |
| Появление в вебе | -webkit-transform, 2007 |
| Влияние на раскладку | нет |
Как пользоваться
Отдельно настраивается точка отсчёта: поворот вокруг центра и вокруг левого верхнего угла выглядят совсем по-разному. Для трёхмерных поворотов включается перспектива, без неё вращение по X и Y выглядит плоским сжатием.
- Сдвиг, масштаб, поворот и наклон. Функции с нейтральным значением в код не попадают.
- transform-origin двигает ось вращения: центр, угол или произвольная точка.
- Без неё повороты вокруг X и Y выглядят просто сжатием по одной стороне.
- Готовое свойство под предпросмотром. Порядок функций тот же, в котором они применяются.
Частые вопросы
Важен ли порядок функций в transform
Да, и это главная ловушка. Функции применяются справа налево, каждая — к уже преобразованной системе координат. translateX(100px) rotate(45deg) сдвинет вправо и повернёт на месте, а rotate(45deg) translateX(100px) сначала повернёт оси, и сдвиг пойдёт по диагонали. Инструмент держит фиксированный порядок, чтобы результат был предсказуем.
Почему transform не двигает соседние элементы
Потому что он применяется на этапе отрисовки, когда разметка уже посчитана: браузер знает, где элемент занимает место, и сдвигает только картинку. Отсюда и главный плюс: анимация transform не вызывает пересчёт разметки и идёт на видеокарте. Отсюда же минус — сдвинутый элемент может наехать на соседа.
Что такое transform-origin
Точка, вокруг которой происходит поворот и от которой считается масштаб. По умолчанию центр элемента. Сдвиньте её в левый верхний угол — и поворот превратится в качание, как у стрелки часов. Задаётся двумя значениями: по горизонтали и по вертикали, в процентах или пикселях.
Зачем нужна перспектива
Она задаёт расстояние от зрителя до плоскости экрана. Без неё поворот вокруг горизонтальной оси просто сплющивает элемент, потому что нет схождения линий. Значение — это дистанция: 300px даёт резкую, почти театральную перспективу, 1200px — мягкую и естественную.
Проценты в translate считаются от чего
От размеров самого элемента: родитель на проценты в transform не влияет. translateX(50%) сдвинет блок на половину его собственной ширины. Это удобно для центрирования: пара left: 50% и translateX(-50%) ставит элемент по центру независимо от его ширины.
Что делает scale с текстом внутри
Растягивает его как картинку, вместе с толщиной букв и размытием на дробных значениях. Для увеличения текста лучше менять font-size: буквы отрисуются заново и останутся резкими. scale уместен для анимации при наведении, где размытие незаметно.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Больше двадцати эффектов появления, внимания и движения. Выдаёт и правило keyframes, и свойство animation целиком.
ОткрытьГенератор box-shadowТень блока со слоями: смещение, размытие, растяжение, цвет и прозрачность. Внутренняя тень, готовые пресеты и разбор чужого значения.
ОткрытьГенератор text-shadowТень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьГенератор clip-pathОбрезка блока по фигуре: многоугольник с перетаскиванием точек, круг, эллипс и рамка. Скосы, шестиугольники и звёзды из пресетов.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.
Сервисы, о которых здесь речь
Что это за инструменты, кому подходят и что доступно без оплаты — в карточках каталога.
ТочкаВесь раздел: Банки для бизнеса и расчётный счёт.