HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

— webkit-transform: skewX(10deg) translateY(2mm) }

Здесь мы подвергаем контейнер cheader сначала сдвигу по горизонтальной оси на 10o, а потом — смещению по вертикальной оси на 2 мм.

По умолчанию все преобразования выполняются относительно центра элемента Web-страницы. Так, если мы повернем элемент на какой-то угол, он повернется относительно своего центра. Но мы можем указать другую точку, относительно которой будут выполняться все последующие преобразования. Для этого служат расширения CSS — moz-transform-origin (Firefox), — o-transform-origin (Opera) и — webkit-transform-origin (Web-обозреватели на программном ядре Webkit):

— moz-transform-origin|-o-transform-origin|-webkit-transform-origin:<координата>|left|center|right [<координата>|top|center|bottom]

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

Само значение координаты может быть задано в любой абсолютной или относительной единице измерения, поддерживаемой CSS. Также можно указать значения left (левый край элемента Web-страницы), center (центр), right (правый край), top (верхний край) и bottom (нижний край).

Листинг П10 иллюстрирует пример.

Листинг П10

#cheader { — moz-transform: rotate(30deg);

— o-transform: rotate(30deg);

— webkit-transform: rotate(30deg);

— moz-transform-origin: left;

— o-transform-origin: left;

— webkit-transform-origin: left }

Здесь мы поворачиваем контейнер cheader на 30o относительно точки, которая находится в середине его левого края. Мы задали в качестве координаты точки, относительно которой будут выполняться преобразования (в том числе и поворот), значение left (левый край контейнера) — это ее координата по горизонтали; в качестве вертикальной координаты, поскольку мы ее не указали, будет принята середина контейнера.

Еще один пример иллюстрирует листинг П11.

Листинг П11

#cheader { — moz-transform: rotate(30deg);

— o-transform: rotate(30deg);

— webkit-transform: rotate(30deg);

— moz-transform-origin: right bottom;

— o-transform-origin: right bottom;

— webkit-transform-origin: right bottom }

Теперь контейнер cheader будет повернут на 30o относительно своего нижнего правого угла.