Page 95 - Сила CSS3 Освой новейший стандарт

Трансформирование аватаров • 95

• rotate поворачивает объект на определенный угол (deg). Положительные значения со-
ответствуют направлению по часовой стрелке; отрицательные значения соответствуют
направлению против часовой стрелки. Например: rotate(45deg);
• skew наклоняет или деформирует объект; степень искажения также задается в граду-
сах. Первое значение управляет горизонтальным наклоном, а второе вертикальным.
Если указано только одно значение, то наклон по оси Y остается нулевым. Например:
skew(10deg, 20deg).
В одно свойство transform можно добавить несколько функций трансформации, разделяя
их пробелами. Трансформации применяются к объекту в порядке перечисления.
Свойство transform-origin позволяет указать исходную точку трансформации — т. е. точку,
относительно которой объект трансформируется. Это можно делать с помощью ключевых
слов, числовых или процентных значений. Значение по умолчанию — center.
При трансформировании определенного объекта другие объекты вокруг него не сдвигают-
ся, для того чтобы освободить пространство (как при относительном позиционировании).
Сначала объект помещается на свое место, а затем трансформируется.
Помимо поворота аватаров, трансформации можно использовать для реализации сле-
дующих эффектов:
• увеличение размера ссылок, кнопок или строк таблиц при наведении указателя мыши;
• масштабирование эскизов в галерее изображений при наведении указателя мыши;
• поворот фотографий (например, для того чтобы создать впечатление, что они при-
креплены кнопками к доске или разбросаны по столу);
• создание текстовых полей, имитирующих приклеенные под наклоном липкие листочки
для заметок;
• облако тегов, в котором теги отображаются под углом (значение наклона выбирается
случайным образом; см. http://code.almeros.com/how-to-create-a-css3-enabled-tag-
cloud);
• скошенные поля или изображения (имитация перспективы);
• небольшие диагональные баннеры в верхнем углу страницы;
• поставленный на бок текст (например, этот прием часто используется для отображения
меток даты и времени в блогах; см. http://snook.ca/archives/html_and_css/css-text-
rotation);
• подготовка к печати складных брошюр (см. http://natbat.net/2009/May/21/pocketbooks);
• слайд-шоу, в которых изображения плавно въезжают и выезжают из области просмотра
(с использованием translate; см. http://css3.bradshawenterprises.com/#slide2);
• ссылки или заголовки вкладок, полностью раскрывающиеся при наведении указателя
мыши (с использованием translate; см. http://creativefan.com/css3-tutorial-create-card-
pockets-how-to);
• объемный куб (с использованием skew из спецификации 2D; см. http://depotwebdesigner.
com/tutorials/how-to-create-3d-cube-with-css3.html).

www.trk.kg