Свойство transform-origin

Наряду с упоминавшимися ранее трансформациями вы можете использовать свойство transform-origin для изменения точки, относительно которой осуществляются трансформации:

Transform: rotate (45deg); transform-origin: 20% 20%;

Задействовав этот код для навигационных ссылок, мы получим следующий результат (рисунок 7.11).

При наведении указателя мыши ссылка поворачивается на 45° и смещается вниз

Свойство transform-origin придется кстати, поскольку по умолчанию трансформации выполняются относительно центра элементов. Это удобный инструмент, позволяющий сместить точку, относительно которой осуществляются трансформации, и помогающий добиться интересных результатов.

ПРИМЕЧАНИЕ.

Полную информацию о свойстве transform-origin можно отыскать по адресу http://www.w3.org/ TR/css3-2d-transforms/#transform-origin-property.

Вот мы и рассмотрели основы 2D-трансформаций. Они намного более широко реализованы в браузерах, чем их 3D-собратья. Если разумно подходить к использованию 2D-трансформаций, они будут легковесными средствами обеспечения визуальных «украшательств», которыми смогут насладиться пользователи современных браузеров.

ПРИМЕЧАНИЕ.

Полную спецификацию CSS3 2D Transforms Module Level 3 вы можете найти по адресу http:// www.w3.org/TR/css3-2d-transforms/.