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

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

Отдельные свойства преобразования CSS (translate, rotate и scale) позволяют применять преобразования независимо от свойства transform. Этот подход упрощает переопределение одного преобразования, например в :hover.

Основные этапы реализации

Отдельные свойства преобразования всегда применяются в фиксированном порядке, независимо от их порядка в CSS:

1. translate
2. rotate
3. scale
4. transform (применяется последним)

Если вам нужен другой порядок (например, масштабирование перед поворотом), продолжайте использовать функции свойства transform.

Функции преобразования не переопределяют отдельные свойства преобразования. Другими словами, scale: 2; transform: scale(3); сначала увеличится в 2 раза, а затем ещё в 3 раза, то есть в общей сложности в 6 раз.

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

Свойство transform и отдельные свойства преобразования влияют на макет и отрисовку страницы и могут привести к неожиданному поведению при позиционировании по оси Z или привязке. ОБЯЗАТЕЛЬНО. Если к элементу может быть применено преобразование в рамках изменения состояния, например :hover, или перехода или анимации, примените тождественное преобразование к базовому элементу. Это гарантирует, что контекст наложения и контейнер элемента не изменятся при применении преобразования.

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

Независимая анимация и переходы

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

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

Резервные стратегии

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

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}