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.

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="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 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

Браузеры

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

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

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