Модель визуального форматирования 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 задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму.

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

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

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;