Сочетание CSS-свойств: transform, translate, rotate, scale и offset

CSS-свойство transform становится ещё мощнее, благодаря новым отдельным свойствам преобразований (translate, rotate, scale) и свойству для смещения – offset (как часть CSS Motion Path). Все они эффективно обеспечивают преобразование html-элемента и должны следовать определенным правилам, чтобы точно определять, как эти преобразования будут применяться.

Эти новые свойства доступны в Firefox 72+. Отдельные свойства Motion path есть в браузерах Chromium, а некоторые свойства преобразования скрываются за флажком Experimental Web Platform Features.

Сила свойства transform в поддержке любого количества преобразований. Оно может содержать несколько перемещений, поворотов, масштабов, перекосов и изменений перспективы. Если объединять их в разном порядке, то можно получать различные эффекты.

Как эти свойства взаимодействуют с transform и transform-origin?

Основы преобразований

Когда выполняется преобразования, то сам элемент технически остается неизменным. Трансформации влияют только на его систему координат. Таким образом, вращение поворачивает его по осям x и y. Для преобразования, которое поворачивает элемент на 45 градусов, а затем применяет перевод на 100 пикселей вправо, реальное движение не будет горизонтальным вправо. Вправо элемент начнёт перемещение от уже измененной при повороте системы координат: вниз и вправо под углом 45 градусов.

See this code Visual Reference: Transform Coordinate Systems on x.xhtml.ru.

Какие возможности предоставляют отдельные свойства преобразования?

aside {
  rotate: 33deg;
  scale: .85;
  translate: 20px 50px;
}
aside.equivalent {
  transform: translate(20px, 50px) rotate(33deg) scale(.85);
}

Чтобы не перечислять все свойства внутри функции transform, можно указать одно перемещение, одно вращение и одно масштабирование по-отдельности. Заодно это позволит при необходимости изменить только какое-то одно преобразование, не меняя остальные.

aside {
  transform: rotate(10deg)
}
aside:hover {
  transform: scale(.85);
}

На первый взгляд можно было бы ожидать, что элемент будет повернут на 10 градусов (rotate), а затем при наведении курсора добавит к исходному преобразованию масштабирование (scale). Однако, свойство transform будет переопределено, поэтому вращение потеряется при наведении курсора. По мере того, как усложняются различные состояния или взаимодействия, может быть тяжело поддерживать все желаемые варианты преобразований.

С отдельными свойствами преобразования можно добавлять или удалять отдельные трансформации, не влияя на остальные. Таким образом, можно немного изменить код и получить желаемый результат, в котором элемент при наведении одновременно поворачивается и масштабируется.

aside {
  rotate: 10deg
}
aside:hover {
  scale: .85;
}

Теперь можно применить transition или анимацию по отдельности. В этом примере масштабирование и перемещение изменяются при наведении курсора с разной продолжительностью и задержкой. Поворот не выполняется в transition и не влияет на анимации двух других свойств.

See this code Independent Transform Properties on x.xhtml.ru.

Есть ли ограничения?

Отдельные свойства не работают с несколькими вариантами опций, как в исходном свойстве transition. Если нужно реализовать что-то большее, придётся вернуться к transition.

Все они также имеют один и тот же transform-origin, поэтому независимо от того, используете ли свойство transform или три свойства по отдельности, все они зависят от transform-origin.

Эти свойства всегда применяются в одном и том же порядке, и они появляются перед всем остальным в свойстве transform:

1. translate
2. rotate
3. scale

See this code Visual Reference: Order of translate, rotate, scale on x.xhtml.ru.

Если нужно, чтобы rotate применялось перед translate, придётся использовать свойство transform. Подойдёт любой из следующих вариантов.

aside {
  transform: rotate(30deg) translate(10px,10px);
}
/* Они по-прежнему разделены, поэтому могут работать независимо */
aside.alternate {
  rotate: 30deg;
  transform: translate(10px,10px);
}

Свойство offset

С помощью свойства transform элемент можно перемещать, вращать, масштабировать и наклонять. Также эффективно перемещать и вращать элемент можно с помощью свойства offset.

Несмотря на то, что это работает по-другому, все свойства offset применяют преобразования в той же системе координат. Таким образом, они полагаются на тот же transform-origin, который используют остальные четыре отдельных свойства преобразований.

Когда применяются свойства offset?

Три новых независимых свойства преобразования применяются до свойств offset. Функции transform применяются после offset.

1. translate
2. rotate
3. scale
4. offset (distance, anchor, rotate …)
5. transform (здесь можете устанавливать свой порядок)

Так, например, использование базовой анимации offset-path вернёт различный визуальный результат, если объединить ее с transform: translate (25px -35px) или translate: 25px -35px.

See this code transform:translate vs translate with offset-path on x.xhtml.ru.

Довольно интересно (и часто сбивает с толку) то, как все они взаимодействуют друг с другом. Однако знание последовательности преобразований – это уже половина решения в прояснении магии, происходящей с transform, отдельными свойствами преобразования и траекторией движения.

Поддержка отдельных свойств преобразований в вашем браузере

translate
rotate
scale
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate

How They Fit Together: Transform, Translate, Rotate, Scale, and Offset.