Hiệu ứng xoay tròn cho ảnh áp dụng cho blog/web

Hiệu ứng xoay tròn ảnh khi rê chuột được áp dụng rộng rãi trong thiết kế blog/web, nó đem lại cảm giác thích thú và hào hứng cho người truy cập.Với việc tạo hiệu ứng xoay tròn ảnh hoàn toàn bằng CSS nên không ảnh hưởng gì tới tốc độ load trang.

Hiệu ứng này trông cũng khá đẹp mắt có thể áp dụng cho ảnh thumbnail trong các tiện ích như bài viết gần đây,bài viết ngẫu nhiên, bài đăng phổ biến...

Hiệu ứng này có hai code
Minh họa

Dạng 1
CSS

#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 

HTML

<div id="social">
<img src="Link Hình Ảnh" /></div>

Dạng 2
CSS

.dauto {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.dauto:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

HTML

<img class="dauto" src="Link hình Ảnh"/>