CSS transform — поворот, масштаб, зсув і нахил

Властивість transform дозволяє застосовувати 2D або 3D трансформацію до елементу. Ця властивість дозволяє обертати, масштабувати, переміщувати, нахиляти елемент, тощо.

Властивість transform отримує в якості значень "трансформуючі функції". Ці функції виглядають як scale(), translateX(), rotate() тощо. Вони приймають параметри для визначення ступення трансформації.

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

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

transform: none|transform-functions|initial|inherit;

Властивість transform може отримувати 24 значень:

none

Скасовує трансформацію. Без задання.

автор: Svitlana

правити

matrix(n,n,n,n,n,n)

2D перетворення, за допомогою матрицю з шести значень.

автор: Svitlana

правити

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

3D перетворення, за допомогою матриці 4x4 з 16 значень.

автор: Svitlana

правити

translate(x,y)

2D зсув по горизонталі і вертикалі.

автор: Svitlana

правити

translate3d(x,y,z)

3D зсув по трьом вісям.

автор: Svitlana

правити

translateX(x)

2D зсув по горизонталі (вісь X). Дозволені від'ємні значення. Додатне значення зсовує вправо, від'ємне вліво.

автор: Svitlana

правити

translateY(y)

2D зсув по вертикалі (вісь Y). Дозволені від'ємні значення. Додатне значення зсовує вниз, від'ємне вверх.

автор: Svitlana

правити

translateZ(z)

3D зсув по вісі Z. Дозволені від'ємні значення. Додатне значення зсовує вправо, від'ємне вліво.

автор: Svitlana

правити

scale(x,y)

Масштабування елемента по горизонталі та вертикалі. Значення меньше 1 - зменшує елемент, більше - збільшує.

автор: Svitlana

правити

scale3d(x,y,z)

Масштабування елемента тривимірному просторі.

автор: Svitlana

правити

scaleX(x)

Масштабування елемента по горизонталі (вісь X).

автор: Svitlana

правити

scaleY(y)

Масштабування елемента по вертикалі (вісь Y).

автор: Svitlana

правити

scaleZ(z)

Маштабування елемента по вісі Z.

автор: Svitlana

правити

rotate(angle)

Обертає елемент, на заданий кут, в двомірному просторі.

автор: Svitlana

правити

rotate3d(x,y,z,angle)

Обертає елемент в тривимірному просторі.

автор: Svitlana

правити

rotateX(angle)

3D обертання елемента по вісі Х.

автор: Svitlana

правити

rotateY(angle)

3D обертання елемента по вісі Y.

автор: Svitlana

правити

rotateZ(angle)

3D обертання елемента по вісі Z.

автор: Svitlana

правити

skew(x-angle,y-angle)

2D перекіс двум вісям Х- та Y ( по горизонталі та вертикалі).

автор: Svitlana

правити

skewX(angle)

2D перекіс по горизонталі (вісь Х).

автор: Svitlana

правити

skewY(angle)

2D перекіс по вертикалі (вісь Y).

автор: Svitlana

правити

perspective(n)

Перспективний вид для 3D трансформованого елемента.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	36	16	9	23	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	36	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="rot">Повернутий на 7°</div>
<div>Звичайний блок для порівняння</div>

div {
    width: 220px;
    padding: 10px;
    margin-bottom: 16px;
    background: #eef6ff;
    border: 1px solid #0172ad;
}

.rot {
    transform: rotate(7deg);
}

<div class="strip">
    <div class="box">звичайний</div>
    <div class="box rot">rotate(20deg)</div>
    <div class="box sc">scale(1.4)</div>
    <div class="box tr">translateY(-30px)</div>
    <div class="box">звичайний</div>
</div>

.strip {
    display: flex;
    gap: 1rem;
    padding: 3rem 1rem;
    background: #faf7f2;
}

.box {
    width: 110px;
    padding: 1rem 0;
    text-align: center;
    background: #d8c3a5;
    border: 1px solid #b39b76;
}

.rot { transform: rotate(20deg); }
.sc  { transform: scale(1.4); }
.tr  { transform: translateY(-30px); }

<div class="skew">Я перекошений блок</div>

div {
  width: 175px;
  padding: 20px;
  background: gold;
  margin: 125px auto 0 auto;
}

.skew {
  transform: skewX(10deg) skewY(35deg);
}

<p>Вибери потрібне значення для <code>transform: translate(); </code>(у відсотках):</p>

<input type="number" value="0" step="10" id="field"></input>
<input type="number" value="0" step="10" id="field2"></input>

<div id="block">
  Привіт! :)
</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 17px;
  font-family: sans-serif;
}

#field,
#field2{
  padding: 8px;
}

#block {
  width: 100px;
  padding: 30px;
  text-align: center;
  background: gold;
  margin: 36px auto 0 auto;
}

var block = document.getElementById('block');
var field = document.getElementById('field');
var field2 = document.getElementById('field2');

field.onchange = field2.onchange = function change() {
  var newVal = getNewValue();
  block.style.transform = 'translate(' + newVal[0] + 'px, ' + newVal[1] + 'px)';
};

function getNewValue() {
  var result = [];
  result[0] = field.value;
  result[1] = field2.value;
  return result;
}
//# sourceURL=pen.js