Читать «HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов» онлайн - страница 252

scaleX|scaleY(<масштаб>)

#cheader { -moz-transform: scaleX(2);

-o-transform: scaleX(2);

-webkit-transform: scaleX(2) }

Преобразование skew позволяет сдвинуть элемент Web-страницы по горизонтальной и вертикальной оси на заданный угол, тем самым "скособочив" его:

skew(<угол 1>[, <угол 2>])

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

Сдвигаем контейнер cheader по горизонтальной оси на 10º. По вертикальной оси он сдвинут не будет, поскольку мы задали угол сдвига 0º:

#cheader { -moz-transform: skew(10deg, 0deg);

-o-transform: skew(10deg, 0deg);

-webkit-transform: skew(10deg, 0deg) }

Преобразования skewX и skewY позволяют сдвинуть элемент Web-страницы, соответственно, только по горизонтальной и только по вертикальной оси.

Пример:

skewX|skewY(<угол>)

#cheader { -moz-transform: skewX(10deg);

-o-transform: skewX(10deg);

-webkit-transform: skewX(10deg) }

Преобразование translate позволяет сместить элемент Web-страницы по горизонтальной и вертикальной оси на заданное расстояние:

translate(<расстояние 1>[, <расстояние 2>])

Если указано одно значение, оно задает расстояние для смещения и по горизонтальной, и по вертикальной оси. Если указаны два значения, первое задает расстояние для смещения по горизонтальной, второе — по вертикальной оси. Расстояния могут быть заданы в любых единицах измерения, поддерживаемых CSS.

Смещаем контейнер cheader на 5 мм по горизонтальной оси и на 2 мм по вертикальной:

#cheader { -moz-transform: translate(5mm, 2mm);

-o-transform: translate(5mm, 2mm);

-webkit-transform: translate(5mm, 2mm) }

Преобразования translateX и translateY позволяют сместить элемент Web-страницы, соответственно, только по горизонтальной и только по вертикальной оси.

Смещаем контейнер cheader на 2 мм по вертикальной оси:

translateX|translateY(<расстояние>)

#cheader { -moz-transform: translateY(2mm);

-o-transform: translateY(2mm);

-webkit-transform: translateY(2mm) }

Мы можем подвергнуть элемент Web-страницы сразу нескольким преобразованиям. Для этого следует записать эти преобразования одно за другим, разделив их пробелами. Преобразования будут применяться к элементу в том порядке, в котором они записаны.

Пример:

#cheader { -moz-transform: skewX(10deg) translateY(2mm);

-o-transform: skewX(10deg) translateY(2mm);

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

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

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