Пятница, 25 Мая 2012 13:24

Поворот элемента при наведении на CSS3

Written by 
Оцени эту запись
(16 Голоса)

В этой статье рассмотрим как сделать плавный поворот элемента с помощью свойства transform в CSS3.

 

 

Смотрим демо.

 

Для красоты я сделала картинки кружечками тоже при помощи CSS3, задав им 

 

 

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
 
 
HTML код здесь самый обычный:
 

 

<div class="rot_img_cont">
<div class="rot_img_item"><img src="/images/cat1.jpg"></div>
<div class="rot_img_item"><img src="/images/cat2.jpg"></div>
<div class="rot_img_item"><img src="/images/cat3.jpg"></div>
<div class="rot_img_item"><img src="/images/cat4.jpg"></div>
    <div style="clear:left;"></div>
</div>
 
 
 
Рассмотрим стили:
 
.rot_img_cont .rot_img_item {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg));
-webkit-transition:all 400ms;   
-moz-transition:all 400ms;
-o-transition:all 400ms;
transition:all 400ms; 
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
 
.rot_img_cont .rot_img_item img {
-webkit-border-radius: 95px;
-moz-border-radius: 95px;
border-radius: 95px;
}
 
.rot_img_cont .rot_img_item:hover {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg));
}
 
 
 
Задаем блокам, содержащим картинки угол поворота 0 градусов
 
 
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg));
 
 
Им же задаем задержку выполнения, что даст нам эффект анимации
 
 
-webkit-transition:all 400ms;   
-moz-transition:all 400ms;
-o-transition:all 400ms;
transition:all 400ms;  
 
 
Блокам даем border-radius 100px - это половина ширины блоков
 
 
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
 
 
Картинке скругление задаем немножко меньше, чтобы лучше смотрелось
 
 
.rot_img_cont .rot_img_item img {
-webkit-border-radius: 95px;
-moz-border-radius: 95px;
border-radius: 95px;
}
 
 
А теперь задаем стили этим элементам при наведении на каждый из них - поворот на 180 градусов:
 
 
.rot_img_cont .rot_img_item:hover {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg));
}
 
Получаем красивое вращение картинок.
 
Как можно заметить, каждое свойство задается несколькими строками. Например, поворот задаем так:
 
-moz-transform: rotate(180deg); - для FF
-webkit-transform: rotate(180deg); - для Webkit браузеров - Chrome и Safari
-o-transform: rotate(180deg); - для Opera
-ms-transform: rotate(180deg); - для IE начиная с 9 версии
transform: rotate(180deg)); 
 
 
Это нужно для кроссбраузерности эффекта, под каждый вид браузера своя строка.
 
К сожалению, в IE все смотрится не так красиво. В IE 9 можем видеть скругление и поворот, но поворот не плавный. А в более ранних версиях и того нету. Но все нормальные современные браузеры делают все желаемые эффекты. Потому можно это использовать. Ведь, как вычитала в какой-то статье, не осликом единым живет этот мир)
 
 
 
 

Additional Info

Комментарии  

 
0 #11 garcinia reviews 29.08.2017 03:53
I do not even know the way I stopped up right here,
however I thought this put up used to be great. I do not recognise who you're but
definitely you're going to a famous blogger should you aren't already.
Cheers!

Also visit my web-site ... garcinia reviews: http://articles.medianet.info/article.php?id=3790
 
 
0 #10 kat-khmara 03.07.2014 18:05
Главное, чтобы полезно было))
 
 
0 #9 Alex 02.07.2014 20:31
kat-khmara- Искренне прости за срач в комментах, умная мысля приходит опосля! :-)
Или так:
-----------------------
$("#rotate1,#rotate2").hover(function(){$(this).rotate({duration:811,animateTo:180});},
function(){var e=$(this);setTimeout(function(){e.rotate({duration:811,animateTo:0})},811);});
var angle=0;setInte rval(function() {angle+=8;$("#r otate3").rotate (angle);},90);
 
 
0 #8 Alex 02.07.2014 13:23
Цитирую Alex:
весь код не влез.

Используемые библиотеки- jQuery v2.1.0, jQueryRotate v2.3.
 
 
0 #7 Alex 02.07.2014 13:02
Цитирую Alex:
полностью рабочий и автономный код

:lol: Погарячился! весь код не влез. :sad:
 
 
0 #6 Alex 02.07.2014 12:57
Сам себе, но всё же- Цитирую Alex:
Может кто знает хак для Firefox-а? Или аналогию на JS?

Собрал из кусков разных кодов jQuery, полностью рабочий и автономный код для последних Firefox, Chrome, Opera-Next на 02.07.2014:
---------------------------------------


p{width:125;height:125;background:red}
$(document).ready(function(){$("#block").rotate({bind:{
mouseover:function(){$(this).rotate({duration:811,animateTo:180});},mouseout:function(){var $hoverout=$(this);
setTimeout(function(){$hoverout.rotate({duration:811,animateTo:0})},811);}}});});

---------------------------------------
Есть задержка после отведения мышы с квадрата в конце анимации, зато при отведении мыши с квадрата в самом начале анимации она проигрывается до конца в отличии от css. Кто-нибудь может подскажет, как убрать эту задержку. :-)
 
 
0 #5 download itunes 04.05.2014 19:04
There a variety of causes of needing to download World Of Warcraft
The Burning Crusades for example when you wish to learn it the very first time, or whenever your dog ate your World Of Warcraft The Burning
Crusades Cd's or maybe your computer crashed and also your
downloaded version got lost too.

my weblog: download itunes: http://www.itunesdownloads.org/
 
 
0 #4 garcinia cambogia 15.04.2014 20:20
garcinia cambogia reviews dr oz http://BestFreeSpinner.com provides a free web based
spinning service, and professional article spinning software.

Please do not abuse this service by using it in other programs/script s without permission.


Best Free Spinner: http://bestfreespinner.com miracle garcinia cambogia reviews
 
 
0 #3 Alex 12.04.2014 15:44
Цитирую kat-khmara:
Возможно получится поиграться с задержкой анимации

Пробовал ещё давно- не помогает. Тут дело в том, что старая Opera и новая, а также Chrome проигрывают анимацию до конца, а Firefox остонавливает её сразу при отсутствии фокуса мыши, тут надо какое-то не стандартное решение.
Цитирую kat-khmara:
повесить поворот картинки на родительский элемент

Наверно так получится, но не в моём случае. У меня меню в хидере на этом сделано. Из под хидера торчит только нижняя треть, а при наведении мыши вываливаются остальные две трети с пунктами меню(центр вращения блока смещён). Вот и маюсь уже много времени с этим, в сети ни чего не нашёл.:-)
 
 
0 #2 kat-khmara 01.04.2014 07:27
Мне кажется, что оно и логично. При наведении на угол, он смещается и из него пропадает состояние hover. Возможно получится поиграться с задержкой анимации или же повесить поворот картинки на родительский элемент, который не вращается.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов