Nhận xét mới

N a p g a m e d t . c o m

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>
Share:

Add Comment

14 nhận xét:

  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

-->