Поворот элементов с помощью CSS Transformations

На конец-то CSS сделал шаг вперед и теперь, для браузеров, поддерживающих CSS Transformations, стали возможными повороты элементов до 360 градусов.

Давайте посмотрим на реализацию и примеры.

Mozilla CSS

Свойство CSS с приставкой -moz говорит о том, что оно работает только в браузерах Mozilla. Вы можете крутить элемент на любое количество градусов. Также, вы можете использовать свойство moz-transform-origin, чтобы указать основу трансформации:

WebKit CSS

Конечно же приставка -webkit, говорит о том, что свойство работает только в браузерах на движке WebKit. Синтаксис такой же.

Opera CSS

Приставка o- работает только в браузере Opera.

Internet Explorer CSS

Microsoft использует приставку -ms для CSS свойств (старшие версии браузеров):

Как уже говорилось, CSS сниппет работает только в IE9 и выше, для IE8 и ниже нужна магия filter:

К сожалению эти фильтры не точные и не будут надежно вращать элементы.
Есть еще хак для младших версий браузеров.

Вот и все. CSS Transformations — не новые свойства, но достаточно полезные, чтобы написать про них обзор. А вы используете в своих проектах CSS Transformations? Может быть у вас есть хорошие примеры реализации этих свойств?
P.S.: Купить чехлы для iPad сейчас не так сложно, а вот найти недорогие с разнообразным дизайном — сложнее.


Оставить комментарий