Свойство transform применяет к элементу 2D или 3D трансформацию. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.
В качестве значения свойства transform выступает одна или несколько функций трансформации (разделяемых пробелами), которые будут применятся в том порядке, в котором они определены.
CSS синтаксис
Возможные значения
Значение | Описание |
---|---|
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);
}