transform

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

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

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

[!WARNING] Перетворені за допомогою 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) translate3d(10px, 0, 20px) rotateY(30deg);

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

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

Значення

<transform-function>

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

none

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

Доступність

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

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

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

• MDN розуміння WCAG, пояснення Настанов 2.3
• Розуміння критерію успіху 2.3.3 | W3C розуміння WCAG 2.1

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

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

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

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: #ccc;
}
.two {
  background-color: #d6bb72;
}

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

Результат

Коли елемент повертається перед переміщенням, то напрямок переміщення – по повернутій осі. Такі осі показані пунктирними лініями.

Більше прикладів

Більше прикладів можна знайти у Застосуванні перетворень CSS і <transform-function>.

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

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

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

• Застосування перетворень CSS
• Тип даних <transform-function>, де пояснені всі функції перетворення.
• Окремі властивості CSS: translate, rotate і scale (властивості skew немає).
• Інструмент для візуалізації функцій перетворень CSS, доступний в мережі: Ігровий майданчик перетворень CSS