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

Как комбинировать несколько 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): наклоняет по осям. Используйте осторожно, чтобы не искажать текст.

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

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

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

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

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

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

Нюанс: Если используете 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().

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

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

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

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