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

Преобразования 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 иллюстрирует пример.

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

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

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

Оглавление книги