<transform-function>

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

matrix()

Описывает однородную 2D матрицу преобразования.

matrix3d()

Описывает 3D преобразование как 4×4 однородную матрицу.

perspective()

Устанавливает расстояние между пользователем и плоскостью z=0.

rotate()

Вращает элемент вокруг фиксированной точки на 2D плоскости.

rotate3d()

Вращает элемент вокруг фиксированной оси в 3D пространстве.

rotateX()

Вращает элемент вокруг горизонтальной оси.

rotateY()

Вращает элемент вокруг вертикальной оси.

rotateZ()

Вращает элемент вокруг оси z.

scale()

Масштабирует элемент вверх или вниз на 2D плоскости.

scale3d()

Масштабирует элемент вверх или вниз в 3D пространстве.

scaleX()

Масштабирует элемент вверх или вниз по горизонтали.

scaleY()

Масштабирует элемент вверх или вниз по вертикали.

scaleZ()

Масштабирует элемент вверх или вниз вдоль оси z.

skew()

Наклоняет элемент на 2D плоскости.

skewX()

Наклоняет элемент по горизонтали.

skewY()

Наклоняет элемент по вертикали.

translate()

Перемещает элемент на 2D плоскости.

translate3d()

Перемещает элемент в 3D пространстве.

translateX()

Перемещает элемент по горизонтали.

translateY()

Перемещает элемент по вертикали.

translateZ()

Перемещает элемент вдоль оси z.

Различные модели координат могут быть использованы для описания размера и формы HTML элемента, а также любых примененных к нему преобразований. Наиболее распространённой является декартова система координат, хотя иногда используются также однородные координаты.

В декартовой системе координат двумерная точка описывается двумя значениями: координатой x (абсциссой) и координатой y (ординатой). Это представлено в виде векторной записи (x, y).

В CSS (и большинстве компьютерной графики) начало координат (0, 0) представляет собой верхний левый угол любого элемента. Положительные координаты находятся ниже и правее начала координат, а отрицательные — выше и левее. Таким образом, точка, которая находится на 2 единицы вправо и на 5 единиц вниз, будет (2, 5), а точка, которая находится на 3 единицы влево и на 12 единиц вверх, будет (-3, -12).

Функции преобразования изменяют внешний вид элемента, манипулируя значениями его координат. Линейная функция преобразования описывается с помощью матрицы 2×2, как это:

Функция применяется к элементу, используя умножение матриц. Таким образом, каждая координата изменяется в зависимости от значений в матрице:

Даже можно применить несколько преобразований подряд:

С помощью этой записи можно описать и, следовательно, составить большинство распространённых преобразований: вращение, масштабирование или наклонение. (На самом деле, все преобразования, которые являются линейными функциями, могут быть описаны.) Составные преобразования применяются эффективно в порядке от правого к левому.

Однако одно важное преобразование не является линейным и поэтому должно быть обработано как специальный случай при использовании этой записи: перемещение. Вектор перемещения (tx, ty) должен быть выражен отдельно как два дополнительных параметра.

Следующий пример демонстрирует 3D куб, созданный из элементов 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">Select a transform function</label>
    <select id="transfunction">
      <option selected>Choose a function</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 === "Choose a function") {
    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