rotate(угол) поворачивает элемент на заданный угол, чаще всего в градусах (deg): положительное значение вращает по часовой стрелке, отрицательное - против. Поворот происходит вокруг центра элемента по умолчанию, а не вокруг угла или края - и, как и другие функции transform, не влияет на поток документа.
В этом уроке
Попробуй прямо сейчас: наведи курсор на синий треугольник - он повернётся на 90 градусов ПО ЧАСОВОЙ стрелке (был направлен вверх, станет направлен вправо). Затем замени rotate(90deg) на rotate(-90deg) - увидишь поворот в другую сторону, а на rotate(0.25turn) - результат будет точно таким же, как с 90deg.
rotate(): угол, единицы измерения и направление поворота
Чаще всего угол в rotate() задают в градусах (deg), но допустимы и другие единицы: turn (доли полного оборота - 1turn = 360deg), grad и rad. Проверено на практике: rotate(45deg), rotate(0.125turn) и rotate(50grad) дают абсолютно одинаковую матрицу трансформации - это просто разные способы записать один и тот же угол. Знак важен: положительное значение поворачивает элемент по часовой стрелке, отрицательное - против. Собственный тест подтвердил и обратное: rotate(-90deg) и rotate(270deg) визуально неотличимы, а rotate(0deg), rotate(360deg) и rotate(720deg) в статичном виде (без анимации) выглядят абсолютно одинаково - угол всегда считается по модулю 360 градусов.
.icon-arrow {
transform: rotate(90deg);
} - иконка стрелки поворачивается на четверть оборота по часовой стрелке.
Неправильное ожидание - что для угла, как и для нуля в других свойствах, единица измерения необязательна:
.icon-arrow {
transform: rotate(90);
} - число без единицы измерения (кроме нуля) для угла недопустимо: браузер отбрасывает всё объявление transform, и иконка вообще не поворачивается.
Вокруг какой точки происходит поворот
По умолчанию элемент поворачивается вокруг своего ЦЕНТРА, а не вокруг левого верхнего угла или другой точки - это та же самая точка трансформации (transform-origin: 50% 50%), что мы уже видели у scale() в прошлом уроке: там масштабирование тоже росло из центра, а не от угла. Собственная проверка это подтвердила: у блока 100×60px после transform: rotate(45deg) центр итоговой видимой рамки совпадает с центром исходного блока точь-в-точь, до пикселя - хотя сама рамка, конечно, увеличивается по диагонали. Изменить точку поворота на любую другую (например, на угол или на точку клика) можно свойством transform-origin - это отдельная большая тема одного из следующих уроков.
.card:hover {
transform: rotate(5deg);
} - карточка слегка наклоняется при наведении, оставаясь на месте по центру.
Неправильное ожидание - что поворот происходит вокруг верхнего левого угла, как иногда бывает в графических редакторах или canvas:
/* элемент "улетает" в сторону при повороте, хотя left и top не менялись */
.card:hover {
transform: rotate(45deg);
} - на самом деле элемент никуда не "улетает": он поворачивается вокруг своего центра, просто новая диагональная рамка визуально больше исходной, и это может выглядеть как смещение.
Из истории
Поворачивать элементы умели ещё до появления transform: rotate(). Начиная с Internet Explorer 5.5 существовал проприетарный фильтр filter: progid:DXImageTransform.Microsoft.BasicImage(...) с параметром Rotation - но угол там можно было задать только шагами по 90 градусов, а не произвольным значением. Этот фильтр официально считается устаревшим с выхода IE9, когда браузеры перешли на стандартный CSS transform, позволяющий повернуть элемент на любой угол. Документация Microsoft: BasicImage Filter.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Забыть указать deg у ненулевого угла: rotate(90) вместо rotate(90deg) | Число без единицы измерения (кроме нуля) недопустимо для угла - браузер отбрасывает всё объявление transform | Всегда писать единицу измерения для ненулевого угла: rotate(90deg) (rotate(0) без единицы - единственное исключение, оно валидно) |
| Путать знак с направлением поворота | Положительный угол крутит по часовой стрелке, отрицательный - против, что не всегда совпадает с интуицией | Проверять направление в живом предпросмотре, а не полагаться на память |
| Считать, что rotate(720deg) выглядит иначе, чем rotate(0deg) | В статичном виде (без анимации) результат полностью идентичен - угол считается по модулю 360°; разница появляется только во время перехода/анимации, где важно число полных оборотов по пути | Для статичного поворота достаточно угла в диапазоне 0-360deg |
| Ожидать, что элемент повернётся вокруг своего левого верхнего угла | По умолчанию поворот идёт вокруг ЦЕНТРА элемента (50% 50%), как и у scale() | Чтобы повернуть вокруг другой точки, нужно явно задать transform-origin |
Шпаргалка
| Запись | Что означает |
|---|---|
| transform: rotate(90deg); | Поворот на 90° по часовой стрелке |
| transform: rotate(-90deg); | Поворот на 90° против часовой стрелки |
| transform: rotate(0.25turn); | То же самое, что rotate(90deg) - четверть оборота |
| transform: rotate(270deg); | То же самое, что rotate(-90deg) |
| transform: rotate(0); | Единственный угол, который можно писать без единицы измерения |
| Точка поворота по умолчанию | Центр элемента (50% 50%), а не угол или край |
Коротко: отвечаем на вопросы
Как повернуть текст на 90 градусов с помощью CSS?
Проще всего - transform: rotate(90deg) на элементе с текстом. Если нужно, чтобы текст поворачивался вокруг другой точки, а не вокруг своего центра, дополнительно указывают transform-origin с нужными координатами.
Как сделать, чтобы стрелка плавно поворачивалась при клике или наведении?
Нужны два ингредиента вместе: transition на свойство transform (чтобы поворот происходил плавно, а не мгновенно) и сам transform: rotate() на состоянии :hover или на классе, который переключается кликом через JavaScript. Без transition стрелка просто "прыгнет" в новое положение без анимации.
