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

Определение и применение

CSS свойство transform применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента). Допускается перечислять несколько функций в одном объявлении (разделённые пробелом).

Функции в списке применяются к координатам справа налево; перестановка translate() и rotate() меняет результат. Значение, отличное от none, создаёт контекст наложения и содержащий блок для абсолютно и фиксированно позиционированных потомков.

Попробуйте значения transform

Преобразование меняет отрисовку блока, но не его место в раскладке. Сравните перенос, поворот, масштаб и наклон.

Значение свойстваtransform: none;transform: translate(30px, 20px);transform: rotate(25deg);transform: scale(1.3);transform: skewX(20deg);

transform: none

HTML и CSS примера

HTML

<div class="stage">
  <div class="demo-target">CSS</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: none;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: translate(30px, 20px);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: rotate(25deg);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: scale(1.3);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: skewX(20deg);
}

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

Спецификации: CSS transforms-2, CSS transforms, svgwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.transform
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`transform`	✓36	✓12	✓16	✓23	✓9	✓36	✓16	✓24	✓9	✓3.0	✓4.4	✓9
`3d`	✓12	✓12	✓16	✓15	✓4	✓18	✓16	✓14	✓3.2	✓1.0	✓4.4	✓3.2
`none`	✓1	✓12	✓3.5	✓15	✓3.1	✓18	✓4	✓14	✓3.2	✓1.0	✓4.4	✓3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

transform: none | <transform-list>;

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

| — выбор варианта.

JavaScript синтаксис:

JavaScript

element.style.transform = "none";

Начальное значение свойства

none.

Значения свойства

Значения transform
Значение	Описание
`none`	Указывает, что к элементу не применяется никакой трансформации. Начальное значение.
`matrix(n,n,n,n,n,n)`	Определяет двухмерное преобразование с помощью матрицы из шести значений. Код `matrix(a, b, c, d, e, f) \| a c e \| \| b d f \| \| 0 0 1 \| x′ = a × x + c × y + e y′ = b × x + d × y + f` Значения `a`, `b`, `c` и `d` совместно задают масштабирование, поворот и наклон; `e` и `f` — смещение по горизонтали и вертикали. Подробное описание функции вы можете получить здесь(на русском), либо в оригинале - разделы 20 и 21.
`matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)`	Определяет трехмерное преобразование с помощью матрицы 4x4 из шестнадцати значений в порядке столбцов. Все другие трехмерные функции преобразований основаны на функции `matrix3d`. Подробное описание функции вы можете получить здесь(на русском), либо в оригинале - разделы 20 и 21.
`translate(x,y)`	Определяет двухмерное преобразование путем сдвига элемента влево, вправо, вверх или вниз, используя координаты по оси x и y(отрицательные значения отвечают за сдвиг влево и вверх, положительные за сдвиг вправо и вниз). Элемент, к которому применяется сдвиг не влияет на поток документа.
`translate3d(x,y,z)`	Задает трехмерное преобразование путем сдвига элемента, используя координаты трёх осей.
`translateX(x)`	Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси x.
`translateY(y)`	Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси y.
`translateZ(z)`	Определяет трехмерное преобразование путем сдвига элемента, используя только значение по оси z.
`scale(x,y)`	Определяет двухмерное преобразование путем масштабирования элемента по оси x и по оси y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси x, так и по оси y. К примеру, значение `scale(0.5)` уменьшит элемент в 2 раза (как по оси x, так и по y). Другими словами, значения больше одного при масштабировании увеличивают элемент, меньше одного - уменьшают. При использовании отрицательных значений элемент отображается зеркально. Масштабируемый элемент увеличивается, либо уменьшается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство `transform-origin`).
`scale3d(x,y,z)`	Определяет трехмерное преобразование путем масштабирования элемента по оси x, y и по оси z.
`scaleX(x)`	Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси x.
`scaleY(y)`	Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси y.
`scaleZ(z)`	Определяет трехмерное преобразование путем масштабирования элемента, используя только значение по оси z.
`rotate(angle)`	Задает двухмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство `transform-origin`). Допускается указывать значения угла в следующих единицах: deg — градусы. Оборот окружности составляет 360deg. grad — грады. Оборот окружности составляет 400grad. rad — радианы. Оборот окружности составляет 2π (~6.28rad). turn — обороты. Оборот окружности составляет 1turn. Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно ~1.57rad.
`rotate3d(x,y,z,angle)`	Поворачивает элемент на один угол вокруг оси, заданной вектором `(x, y, z)`. Браузер нормализует вектор; его компоненты не являются отдельными углами поворота. Например, `rotate3d(2, 1, 0, 50deg)` — поворот на `50deg` вокруг оси в плоскости XY, а не последовательность `rotateX(50deg) rotateY(25deg)`. Нулевой вектор не задаёт ось и не даёт поворота.
`rotateX(angle)`	Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси x.
`rotateY(angle)`	Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси y.
`rotateZ(angle)`	Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси z.
`skew(x-angle,y-angle)`	Определяет двухмерное преобразование путем наклона элемента относительно осей x и y. Допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси x. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство `transform-origin`). При использовании отрицательных значений элемент будет наклоняться зеркально.
`skewX(angle)`	Определяет двухмерное преобразование путем наклона элемента относительно оси x.
`skewY(angle)`	Определяет двухмерное преобразование путем наклона элемента относительно оси y.
`perspective(n)`	Задаёт перспективную проекцию для преобразования самого элемента. При меньшем расстоянии искажение сильнее; элемент при этом не перемещается. Допустима неотрицательная длина, значения меньше `1px` при отрисовке ограничиваются до `1px`.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `transform` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Сравните rotate3d с последовательностью rotateX и rotateY: компоненты оси задают направление единственного поворота.

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

CSS Transforms — спецификация transform.

Наследуется

Нет.

Анимируемое

Да. Совпадающие функции интерполируются по параметрам, остальные преобразуются в матрицы. Порядок функций влияет на результат.

Примеры, попробуйте сами

Двухмерные преобразования в CSS

Измените параметры transform и включите флажок «Применить трансформации». Снимите флажок, чтобы вернуть блоки в исходное состояние. Для просмотра рекомендуется полноэкранный режим.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.static {
    margin: 10px;
    background: gray;
}
.static > div {
    line-height: 100px;
    text-align: center;
}
.test2,
.test4,
.test6 {
    background: orange;
}
.test,
.test3,
.test5 {
    background: plum;
}

label {
    cursor: pointer;
}
input {
    accent-color: #35658a;
}
.examples {
    padding-top: 90px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />

    <title>Двухмерные преобразования в CSS</title>
  </head>
  <body>
    <h2>Двухмерные преобразования в CSS</h2>
    <input type="checkbox" id="apply" />
    <label for="apply">Применить трансформации</label>
    <div class="examples">
      <div class="static"><div class="test">translate(-20px, -20px)</div></div>
      <div class="static"><div class="test2">scaleX(.5)</div></div>
      <div class="static"><div class="test3">scale(0, 0.5)</div></div>
      <br />
      <div class="static"><div class="test4">rotate(2turn)</div></div>
      <div class="static"><div class="test5">skewY(20deg)</div></div>
      <div class="static"><div class="test6">matrix(.7,0,.5,.7,-99,-99)</div></div>
    </div>
  </body>
</html>

style.css

CSS

.static {
    display: inline-block;
}
.static,
.static > div {
    width: 180px;
    height: 100px;
    transition: 0.3s linear;
}
#apply:checked ~ .examples .test {
    transform: translate(-20px, -20px);
}
#apply:checked ~ .examples .test2 {
    transform: scaleX(0.5);
}

#apply:checked ~ .examples .test3 {
    transform: scale(0, 0.5);
}
#apply:checked ~ .examples .test4 {
    transform: rotate(2turn);
}

#apply:checked ~ .examples .test5 {
    transform: skewY(20deg);
}

#apply:checked ~ .examples .test6 {
    transform: matrix(0.7, 0, 0.5, 0.7, -99, -99);
}

Трехмерные преобразования в CSS

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

.static {
    margin: 10px;
    background: gray;
}
.static > div {
    font-size: 16px;
    text-align: center;
}
.test2,
.test4,
.test6 {
    background: lightsalmon;
}
.test,
.test3,
.test5 {
    background: goldenrod;
}

label {
    cursor: pointer;
}
input {
    accent-color: #35658a;
}
.examples {
    padding-top: 90px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />

    <title>Трехмерные преобразования в CSS</title>
  </head>
  <body>
    <h2>Трехмерные преобразования в CSS</h2>
    <input type="checkbox" id="apply" />
    <label for="apply">Применить трансформации</label>
    <div class="examples">
      <div class="static">
        <div class="test">matrix3d<br /><br /></div>
      </div>
      <div class="static">
        <div class="test2">translate3d<br />(20px, -60px, 40px)</div>
      </div>
      <div class="static">
        <div class="test3">scale3d<br />(0.5, -0.5, 1.5)</div>
      </div>
      <br />
      <div class="static">
        <div class="test4">
          perspective(500px)<br />
          scaleZ(2) rotateX(75deg)
        </div>
      </div>
      <div class="static">
        <div class="test5">rotate3d<br />(0.7, 0.5, 0.7, 45deg)</div>
      </div>
      <div class="static">
        <div class="test6">
          perspective(150px)<br />
          rotateY(80deg)
        </div>
      </div>
    </div>
  </body>
</html>

style.css

CSS

.static {
    display: inline-block;
}
.static,
.static > div {
    width: 180px;
    height: 100px;
    transition: 0.3s ease-in-out;
}
#apply:checked ~ .examples .test {
    transform: matrix3d(0.3, -0.4, 0.8, 0, 0.2, 0.9, 0.4, 0, -0.9, 0, 0.4, 0, 0, 0, 0, 1);
}
#apply:checked ~ .examples .test2 {
    transform: translate3d(20px, -60px, 40px);
}

#apply:checked ~ .examples .test3 {
    transform: scale3d(0.5, -0.5, 1.5);
}
#apply:checked ~ .examples .test4 {
    transform: perspective(500px) scaleZ(2) rotateX(75deg);
}

#apply:checked ~ .examples .test5 {
    transform: rotate3d(0.7, 0.5, 0.7, 45deg);
}

#apply:checked ~ .examples .test6 {
    transform: perspective(150px) rotateY(80deg);
}

Двухмерный поворот элемента в CSS.

Запустите пример кнопкой редактора и двигайте ползунок, чтобы менять угол поворота элемента.

index.html

HTML

<p>Передвиньте бегунок для поворота элемента:</p>
<input type="range" min="-360" max="360" value="0" data-migration-change-0="" />
transform: rotate(<span id="result">0deg</span>);
<div id="test">Rotate me</div>

main.js

JavaScript

function rotate(value) {
    document.getElementById('test').style.transform = 'rotate(' + value + 'deg)'
    document.getElementById('result').innerHTML = value + 'deg'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-change-0]').addEventListener('change', function () {
    rotate(this.value)
})
document.querySelector('[data-migration-change-0]').removeAttribute('data-migration-change-0')

style.css

CSS

#test {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: khaki;
    border: 1px solid orange;
    transform: rotate(0deg);
}

Один вектор оси и два последовательных поворота

A повёрнут вокруг оси (2, 1, 0) на 50deg, B — последовательно вокруг Y и X. Результаты различаются. Замените у A (2, 1, 0) на (4, 2, 0): направление оси прежнее, поэтому поворот не изменится. Затем попробуйте (1, 0, 0).

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Один вектор оси и два последовательных поворота</title>
  </head>
  <body>
    <div class="scene">
      <div class="card first">A</div>
      <div class="card second">B</div>
    </div>
  </body>
</html>

style.css

CSS

.scene {
    display: flex;
    gap: 50px;
    padding: 30px;
    perspective: 500px;
}
.card {
    width: 80px;
    height: 100px;
    border: 2px solid;
    background: #b8d9ee;
    color: #172c3d;
}
.first {
    transform: rotate3d(2, 1, 0, 50deg);
}
.second {
    transform: rotateX(50deg) rotateY(25deg);
}

CSS свойство transform

Определение и применение

Попробуйте значения transform

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

Начальное значение свойства

Значения свойства

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

Наследуется

Анимируемое

Примеры, попробуйте сами

Двухмерные преобразования в CSS

Трехмерные преобразования в CSS

Двухмерный поворот элемента в CSS.

Один вектор оси и два последовательных поворота

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