Более детальный контроль над преобразованиями CSS с индивидуальными свойствами преобразования.

Преобразуйте элементы с помощью свойств translate , rotate и scale

Bramus

L. David Baron

Свойство transform CSS

Чтобы применить преобразования к элементу, используйте свойство transform CSS . Свойство принимает один или несколько <transform-function> , которые применяются один за другим.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

Целевой элемент перемещается на 50 % по оси X, поворачивается на 30 градусов и, наконец, масштабируется до 120 %.

Хотя свойство transform отлично справляется со своей задачей, оно становится немного утомительным, если вы хотите изменить любое из этих значений по отдельности.

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

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Отдельные свойства преобразования

В комплект поставки Chrome 104 входят отдельные свойства преобразований CSS. Свойства: scale , rotate и translate , которые вы можете использовать для индивидуального определения этих частей преобразования.

Таким образом, Chrome присоединяется к Firefox и Safari, которые уже поддерживают эти свойства.

Переписав предыдущий пример transform с отдельными свойствами, ваш фрагмент станет таким:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Порядок имеет значение

Одним из ключевых различий между исходным свойством transform CSS и новыми свойствами является порядок применения объявленных преобразований.

При использовании transform функции преобразования применяются в том порядке, в котором они записаны — слева (снаружи) направо (внутри).

Порядок отдельных свойств преобразования не совпадает с порядком их объявления. Порядок всегда один и тот же: сначала translate (снаружи), затем rotate , а затем scale (внутри).

Это означает, что оба следующих фрагмента кода дают один и тот же результат:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

В обоих случаях целевые элементы сначала будут перенесены на 50% по оси X, затем повернуты на 30deg и, наконец, масштабированы на 1.2 .

Если одно из отдельных свойств преобразования объявлено вместе со свойством transform , то сначала применяются отдельные преобразования ( translate , rotate , а затем scale ), а transform — последним (внутри). Более подробная информация содержится в спецификации, определяющей способ расчета матрицы преобразования .

Анимации

Основная причина добавления этих свойств — упрощение анимации. Допустим, вы хотите анимировать элемент следующим образом:

Использование transform

Чтобы реализовать эту анимацию с помощью transform , вам придется вычислить все промежуточные значения для всех определенных преобразований и включить их в каждый ключевой кадр. Например, чтобы выполнить поворот на отметке 10 %, необходимо также вычислить значения для других преобразований, поскольку для свойства transform они нужны все.

Результирующий CSS-код будет выглядеть следующим образом:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Использование отдельных свойств преобразования

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

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Использование отдельных свойств преобразования и нескольких ключевых кадров

Чтобы сделать ваш код модульным, вы можете разделить каждую субанимацию на собственный набор ключевых кадров.

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

Благодаря такому разделению вы можете применять каждый отдельный набор ключевых кадров по своему усмотрению, поскольку свойства transform , которые теперь стали отдельными свойствами, больше не перезаписывают друг друга. Кроме того, вы можете задать каждому преобразованию разное время без необходимости переписывать все целиком.

Производительность

Анимации, использующие эти новые свойства, столь же эффективны, как и анимации существующего свойства transform .

Анимации translate , rotate и scale выполняются в композиторе так же, как и анимации transform , поэтому они хороши для производительности анимации так же, как и transform .

Эти новые свойства также работают со свойством will-change . В общем, лучше избегать чрезмерного использования will-change , используя его для минимального количества необходимых элементов и в течение как можно более короткого промежутка времени. Но также хорошо быть как можно более конкретным. Например, если вы используете will-change для оптимизации анимации со свойствами rotate и filter , вам следует объявить это с помощью will-change: rotate, filter . Это немного лучше, чем использование will-change: transform, filter в случае, когда вы анимируете rotate и filter , поскольку некоторые структуры данных, которые Chrome создает заранее, когда вы используете will-change различаются для transform и rotate .

Входит в серию «Новые совместимые устройства».