transform

Властивість CSS transform (перетвір) дає змогу обертати, масштабувати, скошувати й переміщувати елемент. Вона видозмінює координатний простір моделі візуального форматування CSS.

Спробуйте його в дії

Якщо властивість має значення, відмінне від none, то створюється контекст нагромадження. В такому випадку елемент діє для будь-яких position: fixed; чи position: absolute; елементів, котрі містить, як контейнерний блок.

Застереження: Перетворені за допомогою transform можуть бути лише елементи, котрі піддаються перетворенню. А саме – всі елементи, чиє компонування обумовлене рамковою моделлю CSS, окрім: незаміщених рядкових рамок, рамок колонок таблиці й рамок груп колонок таблиці.

Синтаксис

/* Значення – ключові слова */
transform: none;

/* Функційні значення */
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);

/* Декілька функційних значень */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Глобальні значення */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

Властивість transform може бути задана або як ключове слово none, або як одне чи більше значень <transform-function>.

Значення

<transform-function>

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

none

Вказує, що не застосовується жодне перетворення.

Занепокоєння щодо доступності

Анімації масштабування й наближення є проблемними для доступності, адже вони є поширеним тригером певних різновидів мігрені. Якщо є потреба додати до вебсайту такі анімації, слід надати користувачам контроль для їх вимкнення, бажано для всього сайту.

Крім того, слід розглянути використання ознаки медіа prefers-reduced-motion: за її допомогою можна написати медіазапит, котрий вимкне анімації, якщо користувач має у своїх системних налаштуваннях позначку "менше анімації".

Більше подробиць:

Формальне визначення

Початкове значенняnone
Успадковуєтьсяні
Обчислене значенняas specified, but with relative lengths converted into absolute lengths
Створює контекст нагромадженнятак

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

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>Перетворений елемент</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>.

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
transform
Chrome Full support 36
Edge Full support 12
Firefox Full support 16
Internet Explorer Full support 10
footnote
Opera Full support 23
Safari Full support 9
WebView Android Full support 4.4
Chrome Android Full support 36
Firefox for Android Full support 16
Opera Android Full support 24
Safari on iOS Full support 9
Samsung Internet Full support 3.0
3D support
Chrome Full support 12
Edge Full support 12
Firefox Full support 16
Internet Explorer Full support 10
Opera Full support 15
Safari Full support 4
WebView Android Full support 3
prefix
Chrome Android Full support 18
Firefox for Android Full support 16
Opera Android Full support 14
Safari on iOS Full support 3.2
Samsung Internet Full support 1.0

Дивіться також