transform

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

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

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

Синтаксис

/* Значения ключевым словом*/
transform: none;

/* Значения функций */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
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.0, 3.0, 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);

/* Мультифункциональные значения */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Глобальные значения */
transform: inherit;
transform: initial;
transform: unset;

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

Значения

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

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

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> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<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> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )

где
<length-percentage> = <length> | <percentage>

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

Примеры

HTML

<div>Transformed element</div>

CSS

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

Результат

Для того, чтобы посмотреть другие примеры, обратитесь к Использование CSS-трансформации и <transform-function>.

Accessibility concerns

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

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

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

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

Спецификация Статус Комментарий
CSS Transforms Level 2
Определение 'transform' в этой спецификации.
Редакторский черновик Добавлены 3D-функции трансформации.
CSS Transforms Level 1
Определение 'transform' в этой спецификации.
Рабочий черновик Первое определение.
Начальное значениеnone
Применяется ктрансформируемые элементы
Наследуетсянет
Процентыссылается на размер ограничительной рамки
Обработка значениякак указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typeтрансформация
Создаёт контекст наложенияда

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
transformChrome Полная поддержка 36
Полная поддержка 36
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 16
Полная поддержка 16
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Internet Explorer does not support the global values initial and unset.
Полная поддержка 11
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 9
С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
Opera Полная поддержка 23
Полная поддержка 23
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 15
Нет поддержки 10.5 — 15
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 37
Полная поддержка 37
Полная поддержка 2
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.
Chrome Android Полная поддержка 36
Полная поддержка 36
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 24
Полная поддержка 24
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 14
Нет поддержки 11 — 14
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 3.2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 3.0
Полная поддержка 3.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-
3D supportChrome Полная поддержка 12Edge Полная поддержка 12Firefox Полная поддержка 16IE Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.
Opera Полная поддержка 15Safari Полная поддержка 4WebView Android Полная поддержка 3
С префиксом
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18Firefox Android Полная поддержка 16Opera Android Полная поддержка 14Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0

Легенда

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

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