transform

Если свойство имеет значение, отличное от none, будет создан контекст стекирования. В этом случае элемент будет действовать как контейнерный блок для любых position: fixed; или position: absolute; элементов, которые он содержит.

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(30deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Свойство transform может быть указано как ключевое значение none или как одно или несколько <transform-function> значений.

<transform-function>

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

none

Указывает, что преобразование не должно применяться.

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

Также рассмотрите возможность использования prefers-reduced-motion медиа-функции — используйте её, чтобы написать медиа-запрос, который отключит анимации, если пользователь задал уменьшение анимации в своих системных настройках.

Подробнее:

• MDN, объяснения к руководству 2.3 WCAG
• Понимание критерия успеха 2.3.3 | W3C понимание WCAG 2.1

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+  

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

Результат

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

HTML

<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

CSS

.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

Результат

Когда элемент поворачивается перед перемещением, направление перемещения определяется по оси поворота. Эта ось показана пунктирными линиями.

Дополнительные примеры см. в разделах Использование CSS преобразований и <transform-function>.

• Использование CSS преобразований
• <transform-function> тип данных со всеми объяснениями функций преобразования.
• Индивидуальные свойства CSS: translate, rotate и scale (свойства skew нет).
• Онлайн-инструмент для визуализации функций CSS Transform: CSS Transform Playground