Поворот картинки CSS.

Сегодня хочу поделиться интересным приемом, который подсмотрел здесь, а именно рассмотрим поворот картинки CSS при наведении. Не долго думая, решил поделиться этим с теми, кого он интересует. А пригодиться он может очень многим веб-мастерам.

Речь сейчас пойдет о вращении элемента HTML (картинки, блока и других элементов), т.е. о повороте картинки или блока при наведении на него. Перед тем, как начать это реализовывать в моем проекте, я был уверен, что такой прием возможен как минимум через использование JS. Я уже собрался освежить забытые основы jQuery, как вдруг наткнулся на реализацию вращения путем CSS. Думаю, многие уже знают о новых возможностях стилей, но я пишу для тех, кто не в курсе. В общем, ближе к делу…

Сразу выкладываю код:

 .rotate {-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}

.rotate:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);

Не буду вдаваться в подробности и объяснять каждую строчку, скажу лишь, что строчек много потому, что они описывают свойства применительно разных браузеров. Все для достижения максимальной кросс-браузерности.

А теперь давайте посмотрим, что из этого получается. Для начала это будет картинка . Наведите курсор и увидите эффект…

А теперь блок DIV с текстомвнутри…

Это текст в блоке DIV

 

RSS
Нет комментариев. Ваш будет первым!
OyO