Преобразования CSS

Преобразования CSS

В главе 22, ведя разговор о канве и программном рисовании на ней, мы узнали о преобразованиях системы координат. С помощью особых расширений CSS мы можем проделать аналогичные действия над любым элементом Web-страницы: сместить его, повернуть, растянуть или сжать.

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

— moz-transform|-o-transform|-webkit-transform: <преобразование>

Доступных преобразований не так уж и много. Сейчас мы их рассмотрим. Преобразование rotate позволяет повернуть элемент Web-страницы на указанный угол по часовой стрелке:

rotate(<угол>)

Значение угла может быть задано в трех единицах измерения: градусах, радианах и градах. Если требуется указать угол в радианах, после самого числового значения угла ставят обозначение deg, в радианах — rad, в градах — grad. При этом между числом и обозначением единицы измерения угла не должно быть пробелов.

Здесь мы поворачиваем контейнер cheader на 3,14 радиан (примерно 180?):

#cheader { — moz-transform: rotate(3.14rad);

— o-transform: rotate(3.14rad);

— webkit-transform: rotate(3.14rad) }

А здесь будет выполнен поворот контейнера cheader на 30?:

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

— o-transform: rotate(30deg);

— webkit-transform: rotate(30deg) }

Преобразование scale позволяет изменить масштаб элемента Web-страницы по горизонтали и вертикали, растянув его или сжав:

scale(<масштаб 1>[, <масштаб 2>])

Если указано одно значение, оно задает масштаб и по горизонтали, и по вертикали. Если указаны два значения, первое задает масштаб по горизонтали, второе — по вертикали. Значения больше 1 задают увеличение масштаба (растяжение), а значения меньше 1 — уменьшение (сжатие); значение 1 оставляет масштаб без изменений.

Здесь увеличиваем масштаб контейнера cheader вдвое по горизонтали и вертикали, тем самым растягивая его:

#cheader { — moz-transform: scale(2);

— o-transform: scale(2);

— webkit-transform: scale(2) }

А здесь увеличиваем масштаб контейнера cheader вдвое по горизонтали и уменьшаем его вдвое по вертикали:

#cheader { — moz-transform: scale(2, 0.5);

— o-transform: scale(2, 0.5);

— webkit-transform: scale(2, 0.5) }

Преобразования scaleX и scaleY позволяют изменить масштаб элемента Web-страницы, соответственно, только по горизонтали и только по вертикали:

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):

— 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 на 30? относительно точки, которая находится в середине его левого края. Мы задали в качестве координаты точки, относительно которой будут выполняться преобразования (в том числе и поворот), значение 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 будет повернут на 30? относительно своего нижнего правого угла.