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

Трансформации совмещают возможности, традиционно предоставляемые JavaScript и Flash, и начинают дополнять и заменять их в соответствующих областях. В результате JavaScript постепенно вытесняется из области внешнего вида и эффектов назад туда, где он наиболее полезен: во взаимодействие браузера с пользователем и создание сценариев.

Большинство современных браузеров поддерживают свойство трансформаций без приставки производителя, но браузеру Internet Explorer версии 9, современным версиям браузеров Blackberry Browser и UC Browser for Android понадобятся соответствующие приставки производителей. Основные функции трансформаций — поворот, наклон, масштабирование и сдвиг, с возможностью сокращенной записи всех четырех вместе. Во многих случаях масштабирование и сдвиг являются просто удобными альтернативами изменению свойств положений левого, верхнего, правого и нижнего краев и ширины и высоты, но поворот и наклон предоставляют полностью новые возможности.

По умолчанию трансформации начинаются из вычисленного центра элемента. Чтобы изменить это, нужно задать значение свойству начала трансформации.

Чтобы создать трансформацию, используется свойство трансформации с нужной функцией трансформации и соответствующим значением в круглых скобках:

body { transform: rotate(9deg); }

В следующих уроках мы подробно рассмотрим функции трансформаций.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• В чем разница между свойством прозрачности и значением rgba?
• Использование отрицающего псевдокласса CSS3
• Использование функции CSS3 calc ()