Трансформация

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: 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: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: perspective(17px);

/* Мультифункциональные значения */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Глобальные значения */
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>

Примеры

HTML

<div>Transformed element</div>

CSS

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

Результат

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

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

Спецификация Статус Комментарий
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 Полная поддержка Да

Легенда

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

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