1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>How To Rotate Social Icons in HTML/CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table class="table_style" cellspacing="4" cellpadding="4"> <tr> <td> <div class="rotate-image"><img src="image_animation/fb.png" /></div> </td> <td> <div class="rotate-image"><img src="image_animation/twit.png" /></div> </td> <td> <div class="rotate-image"><img src="image_animation/g+.png" /></div> </td> <td> <div class="rotate-image"><img src="image_animation/yt.png" /></div> </td> </tr> <tr> <td> <span>Facebook</span> </td> <td> <span>Twitter</span> </td> <td> <span>Google Plus</span> </td> <td> <span>Youtube</span> </td> </tr> </table> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body { width:450px; margin:auto; margin-top:150px; text-align:center; } .rotate-image { height: 48px; width: 48px; margin: 10px; text-align:center; border-radius: 50%; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; cursor:pointer; } .rotate-image:hover { box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .table_style { border:3px solid #CCC; -webkit-box-shadow: -3px 6px 13px 3px rgba(201,201,201,1); -moz-box-shadow: -3px 6px 13px 3px rgba(201,201,201,1); box-shadow: -3px 6px 13px 3px rgba(201,201,201,1); } span { color:black; } td { text-align:center; font-weight:bold; } |