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>

Artikel Terkait

Tạo Icon xoay với CSS3

4/ 5

Oleh Đinh Công Thành