Трансформации CSS

Трансформации CSS — это модуль каскадных таблиц стилей (CSS), предоставляющий набор функций для изменения визуального отображения HTML-элементов в двумерном (2D) или трёхмерном (3D) пространстве без изменения их положения в нормальном потоке документа. Основные операции включают перемещение (translate), масштабирование (scale), поворот (rotate) и наклон (skew). Трансформации не влияют на расположение соседних элементов, так как изменяют только координатную систему самого элемента, оставляя его исходный блок (bounding box) в потоке документа неизменным.

История и развитие

Первые черновики спецификации CSS Transforms были опубликованы Консорциумом Всемирной паутины (W3C) в 2009 году. Изначально поддержка была реализована в браузерах на движке WebKit (Safari) и Gecko (Firefox) с использованием вендорных префиксов (-webkit-transform, -moz-transform). В 2012 году спецификация достигла статуса «Рекомендация кандидата» (Candidate Recommendation), после чего была стандартизирована и внедрена всеми основными браузерами. В 2019 году вышла вторая версия модуля (CSS Transforms Level 2), добавившая поддержку трёхмерных преобразований и свойство transform-style.

Свойство transform

Основным свойством для применения трансформаций является transform. Оно принимает одно или несколько значений, разделённых пробелами, которые применяются последовательно (справа налево). Значение none отменяет все трансформации.

Двумерные функции

Все двумерные функции работают в плоскости осей X (горизонтальная) и Y (вертикальная).

• translate(tx, ty): Перемещает элемент на заданное расстояние по оси X и Y. Если указано только одно значение, оно применяется к оси X, а Y принимается равным 0. Допускаются отрицательные значения. Единицы измерения — пиксели (px), проценты (%), em и другие. Например, translate(50px, -20px) сместит элемент на 50 пикселей вправо и на 20 пикселей вверх. Процентные значения рассчитываются относительно ширины (для X) и высоты (для Y) самого элемента.
• translateX(tx): Перемещение только по оси X.
• translateY(ty): Перемещение только по оси Y.
• scale(sx, sy): Масштабирует элемент по осям X и Y. Значение 1 соответствует исходному размеру. Значение 2 удваивает размер, 0.5 — уменьшает вдвое. Если указано только одно значение, оно применяется к обеим осям. Отрицательные значения зеркально отражают элемент.
• scaleX(sx): Масштабирование только по оси X.
• scaleY(sy): Масштабирование только по оси Y.
• rotate(a): Поворачивает элемент на угол a вокруг точки преобразования (по умолчанию — центр элемента). Угол задаётся в градусах (deg), радианах (rad), градах (grad) или оборотах (turn). Положительные значения вращают по часовой стрелке, отрицательные — против. Например, rotate(45deg) повернёт элемент на 45 градусов.
• skew(ax, ay): Наклоняет элемент по осям X и Y на заданные углы. Второй параметр опционален. Например, skew(10deg, 5deg) наклонит элемент на 10 градусов по X и на 5 градусов по Y.
• skewX(ax): Наклон только по оси X.
• skewY(ay): Наклон только по оси Y.
• matrix(a, b, c, d, tx, ty): Позволяет задать произвольное аффинное преобразование с помощью матрицы 3×3. Шесть параметров соответствуют элементам матрицы: a (масштаб X), b (наклон Y), c (наклон X), d (масштаб Y), tx (смещение X), ty (смещение Y). Используется для сложных комбинаций преобразований.

Трёхмерные функции

Трёхмерные трансформации добавляют ось Z, которая направлена перпендикулярно экрану (к пользователю). Для их корректного отображения требуется установка свойства perspective на родительском элементе или использование функции perspective() внутри transform.

• translate3d(tx, ty, tz): Перемещение по всем трём осям. Параметр tz принимает только значения длины (не проценты).
• translateZ(tz): Перемещение по оси Z. Положительные значения приближают элемент к зрителю, отрицательные — отдаляют.
• scale3d(sx, sy, sz): Масштабирование по всем трём осям.
• scaleZ(sz): Масштабирование по оси Z (влияет на толщину при трёхмерном отображении).
• rotate3d(x, y, z, a): Поворот вокруг произвольного вектора, заданного координатами x, y, z, на угол a. Например, rotate3d(1, 0, 0, 45deg) эквивалентен rotateX(45deg).
• rotateX(a): Поворот вокруг оси X.
• rotateY(a): Поворот вокруг оси Y.
• rotateZ(a): Поворот вокруг оси Z (эквивалентен двумерному rotate).
• perspective(d): Задаёт глубину перспективы для элемента. Значение d — расстояние от зрителя до плоскости Z=0. Меньшие значения усиливают эффект перспективы.
• matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4): Матрица 4×4 для произвольного трёхмерного преобразования.

Свойство transform-origin

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

Свойство transform-style

Свойство transform-style управляет тем, как дочерние элементы отображаются в трёхмерном пространстве. Принимает два значения:

• flat (по умолчанию): Дочерние элементы сплющиваются в плоскость родительского элемента, игнорируя свои трёхмерные трансформации.
• preserve-3d: Дочерние элементы сохраняют своё положение в трёхмерном пространстве, создавая эффект объёмной сцены.

Свойство perspective

Свойство perspective задаёт глубину перспективы для всех дочерних элементов контейнера. Оно определяет интенсивность трёхмерного эффекта. Значение — длина (например, 600px). Чем меньше значение, тем сильнее искажение. Применяется к родительскому элементу, а не к самому трансформируемому объекту.

Свойство perspective-origin

Свойство perspective-origin определяет положение точки схода (vanishing point) для трёхмерной перспективы. По умолчанию — 50% 50% (центр элемента). Изменение этого свойства позволяет смещать точку, с которой зритель «смотрит» на сцену.

Свойство backface-visibility

Свойство backface-visibility определяет, видна ли задняя сторона элемента, когда он повёрнут к зрителю тыльной стороной. Принимает значения:

• visible (по умолчанию): Задняя сторона видна (зеркальное отображение содержимого).
• hidden: Задняя сторона невидима. Часто используется для создания карточек с переворотом, чтобы скрыть содержимое обратной стороны, когда она не должна быть видна.

Производительность и аппаратное ускорение

Трансформации CSS, особенно трёхмерные, часто обрабатываются графическим процессором (GPU), что обеспечивает высокую производительность и плавность анимации (до 60 кадров в секунду). Для принудительного включения аппаратного ускорения в некоторых браузерах (например, старых версиях Chrome) применяется трюк с добавлением пустой трёхмерной трансформации, например translateZ(0). Однако современные браузеры автоматически оптимизируют рендеринг.

Применение

Трансформации CSS широко используются в веб-дизайне для:

• Создания анимаций и переходов (в сочетании со свойствами transition и animation).
• Реализации интерактивных элементов (кнопки с эффектом нажатия, всплывающие подсказки).
• Построения трёхмерных сцен и слайдеров.
• Создания эффектов «переворота» карточек (card flip).
• Адаптации изображений и текста.

Критика и ограничения

Основным ограничением трансформаций является то, что они не влияют на поток документа. Это может приводить к наложению элементов друг на друга, если не предусмотрено дополнительное управление z-индексом (z-index). Также трёхмерные трансформации могут быть ресурсоёмкими на мобильных устройствах с низкой производительностью GPU. Кроме того, сложные цепочки трансформаций могут усложнить отладку и понимание кода.

Источники

1. Спецификация CSS Transforms Module Level 1 (W3C Recommendation).
2. Спецификация CSS Transforms Module Level 2 (W3C Working Draft).
3. Документация MDN Web Docs по CSS-свойству transform.
4. Статья «CSS Transforms» на сайте CSS-Tricks.