CSS-свойство `transform`

CSS-свойство transform позволяет поворачивать, масштабировать, наклонять или перемещать элемент. Оно изменяет координатное пространство модели визуального форматирования CSS.

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

Вы также можете использовать отдельные свойства трансформации: translate, rotate и scale. Эти свойства применяются в следующем порядке: translate, rotate, scale и, наконец, transform.

Попробуйте в деле

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Синтаксис

/* 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;

Значения

Это свойство задаётся либо ключевым словом none, либо списком значений <transform-function>, разделённых пробелом:

<transform-function>

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

none

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

Доступность

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

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

Узнать больше:

• MDN: Понимание WCAG, пояснения к Руководству 2.3

• [Понимание критерия успеха 2.3.3

  W3C: Понимание WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)

Формальное определение

Формальный синтаксис

transform = 
  none |
  <transform-list>

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

<transform-function> = 
  <matrix()> |
  <translate()> |
  <translateX()> |
  <translateY()> |
  <scale()> |
  <scaleX()> |
  <scaleY()> |
  <rotate()> |
  <skew()> |
  <skewX()> |
  <skewY()> |
  <matrix3d()> |
  <translate3d()> |
  <translateZ()> |
  <scale3d()> |
  <scaleZ()> |
  <rotate3d()> |
  <rotateX()> |
  <rotateY()> |
  <rotateZ()> |
  <perspective()>

<matrix()> = 
  matrix( <number>#{6} )

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )

<translateX()> = 
  translateX( <length-percentage> )

<translateY()> = 
  translateY( <length-percentage> )

<scale()> = 
  scale( [ <number> | <percentage> ]#{1,2} )

<scaleX()> = 
  scaleX( [ <number> | <percentage> ] )

<scaleY()> = 
  scaleY( [ <number> | <percentage> ] )

<rotate()> = 
  rotate( [ <angle> | <zero> ] )

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )

<skewX()> = 
  skewX( [ <angle> | <zero> ] )

<skewY()> = 
  skewY( [ <angle> | <zero> ] )

<matrix3d()> = 
  matrix3d( <number>#{16} )

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )

<translateZ()> = 
  translateZ( <length> )

<scale3d()> = 
  scale3d( [ <number> | <percentage> ]#{3} )

<scaleZ()> = 
  scaleZ( [ <number> | <percentage> ] )

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

<rotateX()> = 
  rotateX( [ <angle> | <zero> ] )

<rotateY()> = 
  rotateY( [ <angle> | <zero> ] )

<rotateZ()> = 
  rotateZ( [ <angle> | <zero> ] )

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Перемещение и поворот элемента

HTML

<div>Transformed element</div>

CSS

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

Результат

Сравнение порядка функций трансформации

Порядок функций трансформации имеет значение.

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

HTML

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

CSS

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original::before,
.original::after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original::after {
  transform: rotate(135deg);
}
.one {
  background-color: #cccccc;
}
.two {
  background-color: #d6bb72;
}

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

Результат

• Блок 1 (сначала translateX(), затем rotate()): координатное пространство сначала смещается на 200px вдоль оси X, затем поворачивается на 135deg внутри этого смещённого пространства, поэтому элемент оказывается справа от своего исходного положения, повёрнутым.
• Блок 2 (сначала rotate(), затем translateX()): координатное пространство сначала поворачивается на 135deg, поэтому элемент затем перемещается на 200px вдоль повёрнутой оси, в направлении, указанном пунктирными линиями. Дополнительные примеры см. в статьях Использование трансформаций CSS и <transform-function>.

Спецификации

Совместимость с браузерами

Смотрите также

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