Вероятно, наиболее полезная из всех трансформаций, трансформация поворота делает именно то, что можно ожидать из ее названия: поворачивает элемент. Браузер не должен догадываться об используемых единицах измерения, так что их нужно добавить в запись: радианы rad, повороты turn или градусы deg. Вот пример записи без приставок производителей, которые в этом случае и не понадобятся для большинства современных версий браузеров:

img#inception {
        width: 400px;
        height: 267px;
        border: 15px solid #ffd;
        transform: rotate(2.5deg);
        float: left;
        margin-right: 2em;
}

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

Совет: Можете включить сглаживание углов для трансформаций поворота и масштабирования в браузерах на движке Webkit, таких как Safari, Chrome и Opera, задав определенное значение свойству тени блока элемента:

img#inception {
        box-shadow: 0 0 1px transparent;
}

Обратите внимание на пять важных особенностей трансформации поворота CSS:

• Поворот элемента во многом похож на использование относительного позиционирования: резервируется изначальное пространство, занятое элементом, и трансформация элемента располагает его выше остального содержимого. Это также означает, что часть элемента при повороте на большое значение может оказаться за пределами страницы.

• Остальное содержимое не знает о трансформациях: текст, обтекающий всплывающее изображение, не меняет свое положение только из-за того, что оно повернуто, и продолжает оборачиваться вокруг изначального прямоугольного пространства, которое занимало изображение. Для того, чтобы текст обтекал нерегулярные формы, нужно использовать другие способы.

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

• Поворот по умолчанию происходит относительно центра элемента. Это можно изменить с помощью задания значения свойства начала трансформации.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование трансформаций CSS: вступление
• Создание наклонного меню с использованием только CSS
• В чем разница между свойством прозрачности и значением rgba?