Читать «HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов» онлайн - страница 253
Владимир Дронов
-moz-transform-origin|-o-transform-origin|-webkit-transform-origin:
Если задано одно значение, оно укажет координату точки, относительно которой будут выполняться преобразования, по горизонтальной оси; координатой этой точки по вертикальной оси станет центр элемента 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º относительно своего нижнего правого угла.
