591 На конец-то CSS сделал шаг вперед и теперь, для браузеров, поддерживающих CSS Transformations, стали возможными повороты элементов до 360 градусов.
Давайте посмотрим на реализацию и примеры.
Mozilla CSS
|
1 |
-moz-transform:rotate(120deg); |
Свойство CSS с приставкой -moz говорит о том, что оно работает только в браузерах Mozilla. Вы можете крутить элемент на любое количество градусов. Также, вы можете использовать свойство moz-transform-origin, чтобы указать основу трансформации:
|
1 |
-moz-transform:rotate(120deg); -moz-transform:skewx(25deg) translatex(150px); |
WebKit CSS
|
1 |
-webkit-transform:rotate(120deg); |
Конечно же приставка -webkit, говорит о том, что свойство работает только в браузерах на движке WebKit. Синтаксис такой же.
Opera CSS
|
1 |
-o-transform:rotate(120deg); |
Приставка o- работает только в браузере Opera.
Internet Explorer CSS
Microsoft использует приставку -ms для CSS свойств (старшие версии браузеров):
|
1 |
-ms-transform:rotate(120deg); |
Как уже говорилось, CSS сниппет работает только в IE9 и выше, для IE8 и ниже нужна магия filter:
|
1 |
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); |
К сожалению эти фильтры не точные и не будут надежно вращать элементы.
Есть еще хак для младших версий браузеров.
|
1 2 3 4 5 6 |
progid:DXImageTransform.Microsoft.BasicImage(rotation=0) // поворот // 0 = 0º // 1 = 90º // 2 = 180º // 3 = 270º |
Вот и все. CSS Transformations — не новые свойства, но достаточно полезные, чтобы написать про них обзор. А вы используете в своих проектах CSS Transformations? Может быть у вас есть хорошие примеры реализации этих свойств?
P.S.: Купить чехлы для iPad сейчас не так сложно, а вот найти недорогие с разнообразным дизайном — сложнее.
