свойство transformCSS3-генератор ☛

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

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	К трансформируемым элементам
Анимируется	Да

Синтаксис ?

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

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

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

matrix

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

matrix3d

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

rotate

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

rotate3d

Поворачивает элемент в трёхмерном пространстве.

rotateX

Поворачивает элемент на заданный угол относительно оси X.

rotateY

Поворачивает элемент на заданный угол относительно оси Y.

rotateZ

Поворачивает элемента на заданный угол относительно оси Z.

scale

Масштабирует элемент по горизонтали и вертикали.

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

scale3d

Масштабирует элемент в трёхмерном пространстве.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

scaleZ

Масштабирует элемент по оси Z.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

translate3d

Сдвигает элемент на заданное значение в трёхмерном пространстве.

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

translateZ

Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает назад, отрицательное вперёд.

perspective

Задаёт перспективу.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .turn:hover {
    transform: rotate(15deg);
   }
  </style>
 </head>
 <body>
  <p>/<img src="images/igels.png" alt="Ёжик" class="turn">
     /<img src="images/igels.png" alt="Ёжик" class="turn"></p>
 </body>
</html>

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

Объект.style.transform

Примечание

Internet Explorer 9 поддерживает свойство -ms-transform.

Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

Safari поддерживает свойство -webkit-transform.

Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.

Браузеры: Настольные Мобильные ?

Internet Explorer		Chrome		Opera				Safari	Firefox
9	10	5	36	10.5	12.10	15	23	4	3.5	16

Android		Firefox Mobile		Opera Mobile	Safari Mobile
2.1	4	3.5	16	11.5	4

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Трансформация

См. также