In some cases this is very useful. This below example done by using css3 animation and transform properties. This is one of the simple css3 trick but i hope this is useful post, It may use any of your webpages.
Styles for Object rotate effect:
float:right;
width: 96px;
height: 100px;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
animation-delay:2s;
background-image:url(“obj1.png”);
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
margin-bottom: 70px;
}
#obj2{
float:right;
width: 96px;
height: 100px;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
animation-delay:2s;
background-image:url(“obj2.png”);
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
margin-bottom: 70px;
}
#obj6{
float:right;
width: 96px;
height: 100px;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
animation-delay:2s;
background-image:url(“obj6.png”);
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
margin-bottom: 70px;
}
/* Standard syntax */
@keyframes mymove {
50% {transform: rotate(30deg);
}
Html code for Object rotate effect:
<div id=”obj2″></div><br /><br /><br />
<div id=”obj6″></div><br /><br /><br />
<div id=”obj1″></div><br /><br /><br />
</div>
