Вы здесь

CSS свойство transform

Свойство transform применяет к элементу 2D или 3D трансформацию. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

В качестве значения свойства transform выступает одна или несколько функций трансформации (разделяемых пробелами), которые будут применятся в том порядке, в котором они определены.

CSS синтаксис

transform: none | функция трансформации | initial | inherit;

Возможные значения

Значение Описание
none Трансформация не применяется.
matrix(n,n,n,n,n,n) Применяет 2D трансформцию с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D трансформацию с помощью матрицы из шестнадцати (4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению свойства "position: relative;". При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Применяет смещение, только по оси Х.
translateY(y) Применяет смещение, только по оси Y.
translateZ(z) Применяет смещение, только по оси Z.
scale(x,y)

Функция scale масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0,5) уменьшит элемент в 2 раза. Предоставление различных значений будет искажать элемент.

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

scale3d(x,y,z) Применяет 3D масштабирование.
scaleX(x) Применяет масштабирование по оси Х.
scaleY(y) Применяет масштабирование по оси Y.
scaleZ(z) Применяет масштабирование по оси Z.
rotate(угол) Функция rotate поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale, по умолчанию точка происхождения - это центр элемента.
rotate3d(x,y,z,угол) Применяет 3D поворот.
rotateX(угол) Применяет 3D поворот по оси Х.
rotateY(угол) Применяет 3D поворот по оси Y.
rotateZ(угол) Применяет 3D поворот по оси Z.
skew(x-угол,y-угол) Функция skew определяет наклон по осям X и Y. Если второй параметр опущен, то наклон элемента произойдёт только по оси X.
skewX(угол) Применяет 2D наклон по оси Х.
skewY(угол) Применяет 2D наклон по оси Y.
perspective(n) Задает перспективу для преобразования 3D элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Развернуть элемент <div>


div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
     transform: rotate(7deg);
}