HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Здесь мы поворачиваем контейнер cheader на 3,14 радиан (примерно 180o):
#cheader { — moz-transform: rotate(3.14rad);
— o-transform: rotate(3.14rad);
— webkit-transform: rotate(3.14rad) }
А здесь будет выполнен поворот контейнера cheader на 30o:
#cheader { — moz-transform: rotate(30deg);
— o-transform: rotate(30deg);
— webkit-transform: rotate(30deg) }
Преобразование scale позволяет изменить масштаб элемента Web-страницы по горизонтали и вертикали, растянув его или сжав:
scale(<масштаб 1>[, <масштаб 2>])
Если
Здесь увеличиваем масштаб контейнера 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 по горизонтальной оси на 10o. По вертикальной оси он сдвинут не будет, поскольку мы задали угол сдвига 0o:
#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 позволяет сместить
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 сначала сдвигу по горизонтальной оси на 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-страницы. Если указаны два значения, первое задаст координату точки по горизонтальной оси, второе — по вертикальной.