CSS Transform: Несколько свойств одновременно в одном элементе

hannadev

CSS Transform позволяет применять несколько трансформаций к элементу за раз. Это удобно для создания сложных эффектов, таких как поворот с перемещением или масштабирование с наклоном. Вы разберётесь, как комбинировать свойства, чтобы избежать ошибок и добиться нужного результата.

Многие сталкиваются с проблемой, когда последняя трансформация перезаписывает предыдущие. Комбинируя свойства правильно, вы упростите код и сделаете анимации более плавными. В этой статье разберём базовые функции, комбинации и новые индивидуальные свойства.

Как комбинировать несколько transform в одной строке

Свойство transform принимает несколько функций через пробел. Они применяются последовательно, и порядок важен: сначала translate, потом rotate — результат отличается от обратного порядка. Например, перемещение квадрата на 200px по X и поворот на 45deg даст разные позиции в зависимости от последовательности.

Если написать transform: rotate(45deg); потом transform: scale(2); — scale перезапишет rotate, и останется только масштабирование. Чтобы оба работали, используйте одну строку: transform: rotate(45deg) scale(2);. Это базовое правило для множественных трансформаций. Такой подход упрощает код и позволяет строить сложные эффекты без лишних элементов.

Вот основные функции для 2D-трансформаций:

translate(x, y): перемещает элемент по осям X и Y. Полезно для позиционирования без изменения layout.
rotate(angle): поворачивает на угол в градусах. Идеально для кнопок или иконок.
scale(x, y): увеличивает или уменьшает. Масштаб 1.5 сделает элемент в 1.5 раза больше.
skew(x, y): наклоняет по осям. Используйте осторожно, чтобы не искажать текст.

Функция	Параметры	Пример
translate	x, y	translate(10px, 20px)
rotate	угол	rotate(45deg)
scale	x, y	scale(1.2, 0.8)
skew	x, y	skew(10deg, 5deg)

Важно: Всегда проверяйте порядок — rotate перед translate повернёт траекторию движения.

Индивидуальные свойства transform: новый подход

Новые свойства вроде translate, rotate и scale позволяют задавать каждую трансформацию отдельно. Они аддитивны: если у вас есть transform: rotate(45deg); и rotate: 90deg; — итог 135deg. Это упрощает анимации, где нужно менять только одно свойство.

В старом подходе для анимации с keyframes приходилось пересчитывать все значения в каждом кадре. С индивидуальными свойствами анимируете каждое отдельно: @keyframes spin { to { rotate: 360deg; } }. Комбинируя с transform, они суммируются автоматически. Такой метод делает код модульным и читаемым.

Преимущества индивидуальных свойств:

Нет перезаписи — свойства складываются.
Легче анимировать частично, без полного перечисления.
Поддержка в современных браузерах растёт.

Свойство	Описание	Совместимость
translate	Перемещение	Chrome 100+, Firefox 113+
rotate	Поворот	Chrome 100+, Safari 15.4+
scale	Масштаб	Chrome 100+, Edge 100+

Нюанс: Если используете transform и индивидуальные свойства вместе, результат аддитивный — тестируйте в devtools.

Matrix и продвинутые комбинации трансформаций

Функция matrix() объединяет все 2D-трансформации в одну матрицу из шести значений: scaleX, skewY, skewX, scaleY, translateX, translateY. Это компактно, но сложно читать: matrix(1, -0.3, 0, 1, 0, 0) наклонит элемент.

Для сложных эффектов комбинируйте с transform-origin, чтобы задать точку поворота или масштаба — по умолчанию центр. Без него поворот может сдвинуть элемент неожиданно. В реальных проектах matrix используют для оптимизации, когда функций много.

Ключевые приёмы для комбинаций:

Используйте matrix для производительности в больших анимациях.
transform-origin: 0 0; — трансформация от левого верхнего угла.
Для 3D добавляйте perspective и matrix3d().

Функция	Параметры	Когда использовать
matrix()	6 значений	Комплексные эффекты
matrix3d()	16 значений	3D-трансформации
transform-origin	x, y, z	Изменение точки

Совет: Визуализируйте в инструментах вроде Polypane, чтобы увидеть порядок применения.

За пределами базовых трансформаций

Комбинируя transform с transition или animation, получаете динамичные интерфейсы. Но есть подводные камни: не все свойства анимируются одинаково плавно, skew может тормозить на мобильных. Стоит поэкспериментировать с individual свойствами в реальных сценариях, вроде hover-эффектов или слайдеров.

Осталось место для глубокого разбора 3D, perspective и GPU-ускорения. Подумайте, как интегрировать это с JavaScript для интерактивности — там открывается ещё больше возможностей.