Свойство 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);
}
