<transform-function>

Тип даних CSS <transform-function> (функція перетворення) представляє перетворення, що впливає на вигляд елемента. Функції перетворення можуть обертати, змінювати розмір, спотворювати чи переміщати елемент у двовимірному, чи тривимірному просторі. Цей тип вживається у властивості transform.

Синтаксис

Тип даних <transform-function> задається за допомогою однієї з перетворювальних функцій, перелічених нижче. Кожна функція застосовує геометричну операцію, або у двовимірному, або в тривимірному просторі.

Матричне перетворення

matrix()

Описує однорідну двовимірну матрицю перетворення.

matrix3d()

Описує тривимірне перетворення у вигляді однорідної матриці 4×4.

Перспектива

perspective()

Задає відстань між користувачем і планом z=0.

Обертання

rotate()

Обертає елемент навколо фіксованої точки на двовимірному плані.

rotate3d()

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

rotateX()

Обертає елемент навколо горизонтальної осі.

rotateY()

Обертає елемент навколо вертикальної осі.

rotateZ()

Обертає елемент навколо осі Z.

Масштабування (зміна розміру)

scale()

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

scale3d()

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

scaleX()

Масштабує елемент по горизонталі.

scaleY()

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

scaleZ()

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

Нахиляння (спотворення)

skew()

Нахиляє елемент на двовимірному плані.

skewX()

Нахиляє елемент по горизонталі.

skewY()

Нахиляє елемент по вертикалі.

Переклад (пересування)

translate()

Перекладає елемент на двовимірному плані.

translate3d()

Перекладає елемент у тривимірному просторі.

translateX()

Перекладає елемент по горизонталі.

translateY()

Перекладає елемент по вертикалі.

translateZ()

Перекладає елемент по осі Z.

Опис

Для опису розміру та форми елемента HTML, як і різноманітних застосованих до нього перетворень, можуть вживатися різні координатні моделі. Найпоширеніша з них – Декартова система координат хоч іноді також вживаються однорідні координати.

Декартові координати

У Декартовій системі координат двовимірна точка описується за допомогою двох значень: координати x (абсциси) та координати y (ординати). Це позначається векторним записом (x, y).

У CSS (і більшості комп'ютерної графіки) початок координат (0, 0) представляє верхній лівий кут будь-якого елемента. Додатні координати – зліва та справа від початку координат, а від'ємні – згори та зліва. Таким чином, точка за 2 одиниці справа та за 5 одиниць внизу буде (2, 5), а точка за 3 одиниці зліва та 12 одиниці згори буде (-3, -12).

Функції перетворення

Функції перетворення змінюють вигляд елемента, змінюючи значення його координат. Лінійна функція трансформації описується за допомогою матриці 2×2, як у прикладі нижче:

$$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$$

Ця функція застосовується до елемента за допомогою перемноження матриць. Таким чином, кожна координата змінюється відповідно до значень у матриці:

$$\left( \begin{array}{cc} a & c \\ b & d \end{array} \right) \left( \begin{array}{c} x \\ y \end{array} \right) = \left( \begin{array}{c} ax + cy \\ bx + dy \end{array} \right)$$

Можна навіть застосовувати декілька перетворень підряд:

$$\left( \begin{array}{cc} a_1 & c_1 \\ b_1 & d_1 \end{array} \right) \left( \begin{array}{cc} a_2 & c_2 \\ b_2 & d_2 \end{array} \right) = \left( \begin{array}{cc} a_1a_2 + c_1b_2 & a_1c_2 + c_1d_2 \\ b_1a_2 + d_1b_2 & b_1c_2 + d_1d_2 \end{array} \right)$$

За допомогою такого запису можна описати, а отже – скомпонувати, більшість поширених перетворень: обертання, масштабування, нахиляння. (Фактично, всі перетворення, що є лінійними функціями, можуть бути так описані.) Складені перетворення застосовуються справа наліво.

Проте одне важливе перетворення не є лінійним, а отже – повинно мати особливий випадок при застосуванні такого запису: перекладання. Вектор перекладання (tx, ty) повинен бути виражений окремо, як два додаткові параметри.

[!NOTE]

Однорідні координати, хоч і хитріші за Декартові, у проєктивній геометрії призводять до матриць перетворення 3×3, і можуть виражати переклад як лінійну функцію.

[!NOTE] Функції перетворення вживаються з властивістю transform, але не з окремими властивостями перетворення – translate, scale чи rotate.

Приклади

Порівняння функцій перетворення

Наступний приклад містить тривимірний куб, створений з елементів DOM і перетворень, а також меню вибору, яке дає змогу вибрати різні функції для перетворення куба, щоб порівняти вплив різних типів.

Оберіть один тип, і відповідне перетворення застосовується до куба; за 2 секунди куб повертається до початкового стану. Його початковий стан – трохи обернений за допомогою transform3d(), щоб спостерігався ефект усіх перетворень.

HTML

<main>
  <section id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </section>

  <div class="select-form">
    <label for="transfunction">Оберіть функцію перетворення</label>
    <select id="transfunction">
      <option selected>Оберіть функцію</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>

CSS

main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}

JavaScript

const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Оберіть функцію") {
    return;
  } else {
    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
    setTimeout(() => {
      example.style.transform = "rotate3d(1, 1, 1, 30deg)";
    }, 2000);
  }
});

Результат

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

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

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

• Властивість CSS transform
• Окремі властивості перетворення:
  • translate
  • scale
  • rotate