Object Rotate Effect using Css

In this post i am going to explain how to create object rotate effect using css and also zooming the object at a same time using css3. This is also very useful snippet for rotating products to the webpage to highlight the products.

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:

#obj1{
  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 style="width:100px; float:right; ">
<div id="obj2"></div><br /><br /><br />
<div id="obj6"></div><br /><br /><br />
<div id="obj1"></div><br /><br /><br />
</div>