2D-трансформации CSS3

Функция 2D-преобразований CSS3 позволяет преобразовывать элементы в двумерном пространстве.

2D-преобразование элементов

Используя функции 2D-преобразований CSS3, можно выполнять базовые преобразовательные операции с элементами в двумерном пространстве, такие как перемещение, вращение, масштабирование и наклон.

Преобразованные элементы не влияют на окружающие элементы, но могут перекрываться, как элементы с абсолютной позиционировкой. Однако, преобразованные элементы занимают пространство в макете по своейdefault позиции (не преобразованные).

Использование CSS-преобразований и функций преобразования

Атрибут transform CSS3 использует функции преобразования для манипулирования координатной системой элемента, чтобы применить эффект преобразования.

Следующие части описывают эти функции преобразования:

Функция translate()

Элемент можно переместить из текущего положения в новое по осям X и Y. Это можно записать как translate(tx, ty). Если ty не указан, то предполагается, что его значение равно нулю.

img {
　　　　-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: translate(200px, 50px); /* Firefox */
　　　　　　　　-ms-transform: translate(200px, 50px); /* IE 9 */
　　　　　　　　　　　　transform: translate(200px, 50px);　　　　　　
}

Функция translate(200px, 50px) перемещает изображение на 200 пикселей вправо по оси X и на 50 пикселей вверх по оси Y.

Функция rotate()

Функция rotate() вращает элемент вокруг его исходной точки (определенной свойством transform-origin) на указанный угол. Может быть записана как rotate(a).

img {
　　　　-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: rotate(30deg); /* Firefox */
　　　　　　　　-ms-transform: rotate(30deg); /* IE 9 */
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

Функция rotate(30deg) вращает изображение вокруг его исходной точки на 30 градусов по часовой стрелке. Вы также можете использовать отрицательное значение для вращения элемента против часовой стрелки.

Функция scale()

Функция scale() увеличивает или уменьшает размер элемента. Может быть записана как scale(sx, sy). Если sy не указан, то предполагается, что она равна sx.

img {
　　　　-webkit-transform: skew(1.5); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: skew(1.5); /* Firefox */
　　　　　　　　-ms-transform: skew(1.5); /* IE 9 */
　　　　　　　　　　　　transform: skew(1.5); /* Modern Browsers */　　　　
}

Функция scale(1.5) масштабирует ширину и высоту изображения до 1.5 раза от исходного размера. Функция scale(1) или scale(1, 1) не оказывает влияния на элемент.

Функция skew()

Функция skew() делает элемент наклоненным по осям X и Y на указанные углы. Может быть записана как skew(ax, ay). Если ay не указан, то предполагается, что его значение равно нулю.

img {
　　　　-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: skew(-40deg, 15deg); /* Firefox */
　　　　　　　　-ms-transform: skew(-40deg, 15deg); /* IE 9 */
　　　　　　　　　　　　transform: skew(-40deg, 15deg); /* Modern Browsers */　　　　
}

Функция skew(-40deg, 15deg) делает элемент наклоненным по горизонтали на -40 градусов по оси X и на 15 градусов по вертикали по оси Y.

функция matrix()

Функция matrix() может выполнять все 2D-преобразования за один раз, такие как перевод, поворот, масштабирование и наклон. Она принимаетМатрицаШестнадцать параметров этой формы можно записать как matrix(a, b, c, d, e, f). В следующем разделе мы покажем, как использовать matrix() для представления каждого 2D-функции преобразования.

• translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); — где tx и ty — значения горизонтального и вертикального смещения.

• rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); — где a — градусы. Вы можете обменять значения sin(a) и -sin(a), чтобы повернуть в обратном направлении. Максимальный угол поворота, который вы можете выполнить, составляет 360 градусов.

• scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0); — где sx и sy — значения горизонтального и вертикального масштабирования.

• skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0, 0); — где ax и ay — горизонтальные и вертикальные значения в градусах.

Это пример выполнения 2D-преобразований с использованием функции matrix().

img {
　　　　-webkit-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Firefox */
　　　　　　　　-ms-transform: matrix(0, -1, 1, 0, 200px, 50px); /* IE 9 */
　　　　　　　　　　　　transform: matrix(0, -1, 1, 0, 200px, 50px);　　
}

Однако, при выполнении нескольких преобразований за один раз удобнее использовать одну функцию преобразования и перечислять их по порядку, как показано ниже:

img {
　　　　-webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Chrome, Safari, Opera */
　　　　　　　-moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Firefox */
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}

Функции 2D-трансформаций

В таблице ниже кратко описаны все функции 2D-трансформаций.