HTML и CSS / CSS3-трансформации

Заметка создана: 02 февраля 2025 г.

Модель визуального форматирования CSS описывает систему координат внутри каждого позиционированного элемента. Система координат является точкой отсчета для свойств смещения. Положение и размеры в этом координатном пространстве можно рассматривать как заданные в пикселях, относительно точки отсчета, с положительными значениями, идущими вправо и вниз. Это координатное пространство можно изменить с помощью свойства transform.

CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.

В HTML трансформируемый элемент это: элемент с display: block; и display: inline-block;, а также элементы, значение свойства displayкоторых вычисляется как table-row, table-row-group, table-header-group, table-footer-group, table-cell или table-caption.

Трансформированным считается элемент с любым установленным значением свойства transform, отличным от none.

В SVG трансформируемый элемент — это элемент, который имеет атрибуты transform, patternTransform или gradientTransform.

Существуют два вида CSS3-трансформаций – 2Dи 3D. 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transformи transform-origin. Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.

2D-трансформации элементов

1. Функции 2D-трансформации: свойство transform

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

Свойство не наследуется.

Функция	Описание
none	Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y)	Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение aизменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение cдеформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение bдеформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение dизменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение xсмещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение yсмещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n)	Сдвигает элемент относительно его обычного положения по оси X.
translateY(n)	Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n)	Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n)	Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1degдо -360degповорачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg)поворачивает элемент на два полных оборота.
skew(x-угол,y-угол)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол)	Деформирует стороны элемента относительно оси X.
skewY(угол)	Деформирует стороны элемента относительно оси Y.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Допустимые значения:

matrix()— любое число
translate(), translateX(), translateY()— единицы длины (положительные и отрицательные), %
scale(), scaleX(), scaleY()— любое число
rotate()— угол (deg, grad, radили turn)
skew(), skewX(), skewY()— угол (deg, grad, rad)

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

Синтаксис

transform: none;
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: rotate(45deg);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: inherit;
transform: initial;

2. Точка трансформации: свойство transform-origin

Свойство transform-origin позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов.

Свойство не наследуется.

transform-origin

Значения:

ось Х(left, center, right, длина, %)

ось Y(top, center, bottom, длина, %)

Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

Наследует значение свойства от родительского элемента.

Синтаксис

transform-origin: 2px;
transform-origin: bottom;
transform-origin: 3cm 2px;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: inherit;
transform-origin: initial;

3. Область преобразования: свойство transform-box

Все преобразования, определяемые свойством transform и transform-origin, относятся к положению и размерам опорного блока элемента. Опорный блок элемента это виртуальный прямоугольник вокруг элемента, который формирует систему координат для отрисовки.

В некоторых браузерах опорный блок принимает центр SVG-холста в качестве точки преобразования. Чтобы решить эту проблему, можно задать для элемента transform-box.

Опорный блок добавляет дополнительное смещение к исходной точке, заданной свойством transform-origin.

Свойство не наследуется.

transform-box

Значения:

content-box

В качестве опорного блока выступает область содержимого элемента. Для элемента <table>эта область включает также заголовок таблицы и рамку.

border-box

В качестве опорного блока выступает область рамки элемента. Для элемента <table>эта область включает также заголовок таблицы и рамку.

fill-box

В качестве опорного блока выступает ограничивающая рамка, содержащая только геометрическую форму элемента.

stroke-box

В качестве опорного блока выступает ограничивающая рамка, содержащая геометрическую форму и обводку элемента.

view-box

В качестве опорного блока используется область просмотра на SVG-холсте, которая определяет прямоугольную область, в которую отображается содержимое SVG.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

Наследует значение свойства от родительского элемента.

Синтаксис

transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;
transform-box: inherit;
transform-box: initial;

CSS, CSS3, Формы, SVG, html