Функция rotate()

Функция rotate() свойства transform позволяет вращать элемент в 2D-пространстве. В скобках задается угол от 0 до 360 градусов. К числу дописывается приставка deg. Пример:

transform: rotate(90deg); /* поворот элемента на 90° по часовой стрелке */
/* не забудьте про вендорные префиксы */

Если указано положительное число, поворот происходит по часовой стрелке, если отрицательное — против часовой. Если установлено значение 0deg, элемент останется в исходном положении. 360deg означает, что элемент совершит один полный оборот по часовой стрелке, 1080deg — три полных оборота, -720deg — два полных оборота против часовой стрелки и т. д.

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

А пока несколько примеров статичных элементов, трансформированных с использованием функции вращения rotate():

Функции для каждой оси

Свойство transform поддерживает дополнительные функции, которые позволяют совершать трансформации относительно осей трехмерного пространства:

• rotateX() — поворот элемента по оси X;
• rotateY() — поворот по оси Y;
• rotateZ() — поворот элемента по оси Z.

Точка вращения

Изначально поворот элемента происходит относительно его центральной оси. Но центр вращения можно изменить, воспользовавшись свойством transform-origin. В качестве значения указываются координаты для трех осей — X, Y и Z.

Единицы измерения для X и Y могут быть любыми. Также принимаются ключевые слова left, center, right (для X) и top, center, bottom (для Y). Для оси Z позволительно использовать корректные единицы измерения длины, кроме процентов.

По умолчанию настройки transform-origin следующие:

transform-origin: 50% 50% 0; /* x y z */

Данное свойство также требует использования префиксов производителей.

Далее в учебнике: функция масштабирования scale().