Tạo Icon xoay với CSS3

"Đổi gió" bằng cách ngồi nghịch CSS .

Bài viết này hướng dẫn cách tạo Icon xoay khi rê chuột với CSS3 (360° , 60° , -360° ) .

Có thể sử dụng hiệu ứng này áp dụng cho hình ảnh trong bài viết ^^ .

Hiển thị tốt nhất trên FireFox 3.5+ , G.Chrome , Safari , và Opera 10+ .



Demo :

Xoay 360° :

Xoay 60° :

Xoay -360° :

CSS :
<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-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;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>

HTML :
Xoay 360° :
<p id="socialicons">
<a href="http://www.vanlinhex.com/">
<img border="0" src="http://2.bp.blogspot.com/-qf8-VqBQmvw/TyyHnCi7cpI/AAAAAAAABT0/pXkit7imwVI/s1600/rss.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://3.bp.blogspot.com/-kFcTKfBw8-8/TyyHmfPHNCI/AAAAAAAABTc/LvrZXAKzMw0/s1600/delicious.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://1.bp.blogspot.com/-4osw17bNWcE/TyyHmsaEpOI/AAAAAAAABTs/x5uG5H4yo20/s1600/facebook.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://2.bp.blogspot.com/-qaBYtxmIeUE/TyyHnbti_eI/AAAAAAAABUA/4H_UNB0uZTQ/s1600/twitter.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://4.bp.blogspot.com/-pkYgKVHNujQ/TyyHnr7bonI/AAAAAAAABUM/X84JauJHUVI/s1600/yahoo.png" /></a></p>

Xoay 60° :
<p id="socialicons2">
<a href="http://www.vanlinhex.com/">
<img border="0" src="http://2.bp.blogspot.com/-qf8-VqBQmvw/TyyHnCi7cpI/AAAAAAAABT0/pXkit7imwVI/s1600/rss.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://3.bp.blogspot.com/-kFcTKfBw8-8/TyyHmfPHNCI/AAAAAAAABTc/LvrZXAKzMw0/s1600/delicious.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://1.bp.blogspot.com/-4osw17bNWcE/TyyHmsaEpOI/AAAAAAAABTs/x5uG5H4yo20/s1600/facebook.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://2.bp.blogspot.com/-qaBYtxmIeUE/TyyHnbti_eI/AAAAAAAABUA/4H_UNB0uZTQ/s1600/twitter.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://4.bp.blogspot.com/-pkYgKVHNujQ/TyyHnr7bonI/AAAAAAAABUM/X84JauJHUVI/s1600/yahoo.png" /></a></p>

Xoay -360° :
<p id="socialicons3">
<a href="http://www.vanlinhex.com/">
<img border="0" src="http://2.bp.blogspot.com/-qf8-VqBQmvw/TyyHnCi7cpI/AAAAAAAABT0/pXkit7imwVI/s1600/rss.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://3.bp.blogspot.com/-kFcTKfBw8-8/TyyHmfPHNCI/AAAAAAAABTc/LvrZXAKzMw0/s1600/delicious.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://1.bp.blogspot.com/-4osw17bNWcE/TyyHmsaEpOI/AAAAAAAABTs/x5uG5H4yo20/s1600/facebook.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://2.bp.blogspot.com/-qaBYtxmIeUE/TyyHnbti_eI/AAAAAAAABUA/4H_UNB0uZTQ/s1600/twitter.png" /></a> <a href="http://www.vanlinhex.com/"><img border="0" src="http://4.bp.blogspot.com/-pkYgKVHNujQ/TyyHnr7bonI/AAAAAAAABUM/X84JauJHUVI/s1600/yahoo.png" /></a></p>
Từ khoá:
Blogger 2/03/2012

14 Bình Luận

  1. nice to meet you, i'm from indonesian :D

    Trả lờiXóa
  2. @Beben Koben : Thanks for ur visiting !
    U're welcome :)

    Trả lờiXóa
  3. Tự nhiên bác đổi gió làm em thấy hứng quá:D mà cái này bỏ vào chỗ nào cho đẹp nhỉ:(

    Trả lờiXóa
  4. @Quang : Để bên Sidebar hay phần Author dưới bài viết cũng dc bác ợ :D

    Trả lờiXóa
  5. Hay quá bác
    Mượt thật :D

    Trả lờiXóa
  6. Làm tấm hình của Autoreadmore xoay được không bạn, chỉ dùm tớ với nhá

    Trả lờiXóa
  7. @Ngọn lửa nhỏ : Em chưa hiểu ý bác lắm !
    Là Thumbnail-img của Auto Readmore hay Readmore button vậy a ?

    Trả lờiXóa
  8. Thumbnail-img ấy pác, em hỏi mấy người mà không ai trả lời

    Trả lờiXóa
  9. Có mấy cái icon nào nhỏ hơn không pác, nếu có thể thì pác làm lun cái thủ thuật share cho bọn em dễ dùng. Tớ mù tịt
    Đang demo ở http://traonhauyeuthuong.blogspot.com/
    Đa tạ nhá

    Trả lờiXóa
  10. @Ngọn lửa nhỏ : Em thử sơ sơ qua tại đây bác xem rồi cho em cái feedback nhé ^^

    Trả lờiXóa
  11. @Nguyễn Hải ™ : Từ cái này có thể áp dụng vào nhiều cái khác cũng phong phú lắm , tùy biến dễ dàng ^^

    Trả lờiXóa
  12. Sao mình không thấy nó xoay nhỉ? Đang xài ff 10.0 mà >.<

    Trả lờiXóa
  13. Nặc danh5/04/2012

    Không hiểu bác này chuyên gia chế tác thêm thắt các bài viết từ blog khác nhưng không bao giờ ghi nguồn cả.

    Trả lờiXóa

Hãy để lại comment, góp ý để blog hoàn thiện hơn
- Vui lòng gõ có dấu khi sử dụng tiếng việt.
- Nghiêm cấm spam link khác.
- Sử dụng ngôn ngữ có văn hóa khi comment.

Thiết kế web với Blogger - Blogspot

Thiết kế Responsive, SEO Friendly Blogger Templates, Bố cục gọn gàng, dễ dàng chỉnh sửa.

Thủ thuật Blogspot - Blogger

Free template blogger, Chia sẻ thủ thuật Blogger - Seo Templates, Tutorial CSS3 - HTML5 Blogger

Dịch vụ Blogspot

Tối ưu hóa SEO, tùy biến Template blogspot thân thiện với các công cụ tìm kiếm phổ biến