Spec-Zone.ru › CSS

`<transform-function>` — тип CSS

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в различных версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.

<transform-function> — это CSS тип данных, представляющий преобразование, которое влияет на внешний вид элемента. Функции преобразования функции могут поворачивать, изменять размер, искажать или перемещать элемент в двухмерном или трёхмерном пространстве. Этот тип используется в свойстве 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).

A cartesian plane showing the negative Y and positive X axis starting from origin with three points P1, P2 and P3 with corresponding X and Y values

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

Функции преобразования

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

(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}

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

(acbd)(xy)=(ax+cybx+dy)\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)

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

(a1c1b1d1)(a2c2b2d2)=(a1a2+c1b2a1c2+c1d2b1a2+d1b2b1c2+d1d2)\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) необходимо задавать отдельно в виде двух дополнительных параметров.

Примечание: Хотя однородные координаты однородные координаты в проективной геометрии сложнее декартовых координат, они позволяют использовать матрицы преобразования 3×3 и представлять перемещения как линейные функции.

Примечание: Функции преобразования используются со свойством 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">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: white;
}

.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;
  }
  example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
  setTimeout(() => {
    example.style.transform = "rotate3d(1, 1, 1, 30deg)";
  }, 2000);
});

Результат

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

Спецификация
CSS Transforms Module Level 1
# transform-functions
CSS Transforms Module Level 2
# transform-functions

Совместимость с браузерами

Настольные компьютеры Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet WebView для Android WebView на iOS
transform-function
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
matrix
1
12
3.5До Firefox 16 значениями перевода matrix() могли быть <length>, а не только стандартные <number>.
10.5
3.1
18
4
11
3.2
1.0
2
3.2
matrix3d
12
12
10До Firefox 16 значениями перевода matrix3d() могли быть <length>, а не только стандартные <number>.
15
4
18
10
14
3.2
1.0
3
3.2
perspective
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
rotate
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
rotate3d
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
rotateX
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
rotateY
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
rotateZ
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
scale
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
scale3d
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
scaleX
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
scaleY
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
scaleZ
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
skew
1
12
3.5В Firefox 14 экспериментальная поддержка skew() была удалена, но в Firefox 15 её вернули.
10.5
3.1
18
4
11
3.2
1.0
2
3.2
skewX
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
skewY
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
translate
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
translate3d
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2
translateX
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
translateY
1
12
3.5
10.5
3.1
18
4
11
3.2
1.0
2
3.2
translateZ
12
12
10
15
4
18
10
14
3.2
1.0
3
3.2

См. также

  • CSS-свойство transform
  • Отдельные свойства преобразования:
    • translate
    • scale
    • rotate

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API