Главная->CSS->transform

transform

15 Нояб 2019г. в 13:59

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

Пример

transform: <функция> [<функция>]* | none

Аргументы

функция - Функция трансформации.
none - Отменяет действие трансформации.

Функции трансформации

matrix - Задаёт матрицу преобразований.

rotate - Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin. transform: rotate(<угол>)

scale - Масштаб элемента по горизонтали и вертикали. transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX - Масштабирует элемент по горизонтали. transform: scaleX(sx);

scaleY - Масштабирует элемент по вертикали. transform: scaleY(sy);

skewX - Наклоняет элемент на заданный угол по вертикали. transform: skewX(<угол>)

skewY - Наклоняет элемент на заданный угол по горизонтали. transform: skewY(<угол>)

translate - Сдвигает элемент на заданное значение по горизонтали и вертикали. transform: translate(tx[, ty])

translateX - Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево. transform: translateX(tx)

translateY - Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх. transform: translateY(ty)