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

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

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

В этой статье рассмотрим как сделать плавный поворот элемента с помощью свойства 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

You have no rights to post comments

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