Image Rolling Effect in CSS3

Hi. This is   code for roll the images .it rotate a images both sides.it contain simple css coding  to rotate a image,Hover a image to rotate automatically images .this is   used to animated your website very easily. 

CSS for rotate text or images

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);


Demo    Download

source code


<html>
<head>
<title>Scroll of Social Media Icon</title>
<style>
.nav
{
float:left; width:600px;
}
.social-roll {
height: 48px;
width: 48px;
margin: 10px;
float: left;
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;
}
.social-roll: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);
}
</style>
<body>
<div class="nav">
<div class="social-roll"><img src="facebook-48circle.png" /></div>
<div class="social-roll"><img src="twitter-48circle.png" /></div>
<div class="social-roll"><img src="googleplus-48circle.png" /></div>
</div>
</body>
</html>

No comments:

Post a Comment