transform

Содержание

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

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

Значение по умолчанию	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.

rotateX()

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

rotateY()

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

rotateZ()

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

rotate3d

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

scale()

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

scaleX()

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

scaleY()

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

scaleZ()

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

scale3d

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

skew()

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

skewX()

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

skewY()

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

translate()

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

translateX()

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

translateY()

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

translateZ()

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

translate3d

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

perspective()

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

Пример

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

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

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

Объект.style.transform

Примечание

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

Chrome до версии 36, Safari до версии 9, Opera до версии 23 и Android поддерживают свойство -webkit-transform.

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

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

Спецификация ?

Спецификация	Статус
CSS Transforms Module Level 1	Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.


9	10	12	5	36	11.5	12.1	15	23	4	9	3.5	16


2.1	3.5	16	12	4	9.2

Браузеры

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

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

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