transform
Поддержка браузерами
12.0+ | 10.0+ | 16.0+ | 36.0+ | 23.0+ | 9.0+ |
Описание
CSS свойство transform применяет 2D или 3D преобразование к элементу. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.
С помощью функций преобразования можно манипулировать внешним видом элемента. В качестве значения свойства transform выступает одна или несколько функций (разделяемых пробелами), которые будут применяться в том порядке, в котором они определены.
Значение по умолчанию: | none |
---|---|
Применяется: | к трансформируемым элементам |
Анимируется: | да |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.transform="rotate(7deg)" |
Синтаксис
transform: none|transform-functions|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) | Определяет смещение, только по оси У. |
translateZ(z) | Определяет 3D смещение, только по оси Z. |
scale(x,y) | Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент. Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin. |
scale3d(x,y,z) | Применяет 3D преобразование масштаба. |
scaleX(x) | Определяет преобразование масштаба по оси Х. |
scaleY(y) | Определяет преобразование масштаба по оси У. |
scaleZ(z) | Определяет 3D преобразование масштаба по оси Z. |
rotate(angle) | Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения - это центр элемента. |
rotate3d(x,y,z,angle) | Определяет 3D поворот. |
rotateX(angle) | Определяет 3D поворот вдоль оси Х. |
rotateY(angle) | Определяет 3D поворот вдоль оси У. |
rotateZ(angle) | Определяет 3D поворот вдоль оси Z. |
skew(x, y) | Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X. |
skewX(angle) | Определяет 2D преобразование наклона вдоль оси Х. |
skewY(angle) | Определяет 2D преобразование наклона вдоль оси У. |
perspective(n) | Определяет перспективу для преобразования 3D элемента. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
transform:
Результат:
Демонстрация работы свойтсва transform.
CSS Код:
#myDIV {
background-color: lightblue;
transform: rotate(10deg);
}
background-color: lightblue;
transform: rotate(10deg);
}