CSS Rotate Animation

CSS Rotating objects like Image or any other content it is easy to implement using Animation, Transform & key frames properties.here i write the code for two images and the two images will rotate CW & CCW positions like Settings.

Step 1

Write the few lines on CSS code inside the HEAD tag.

#animation{width:500px; margin:0 auto;}

#service_img{background-image:url(settings1.png); background-repeat:no-repeat;width:200px; height:200px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite; margin:0 0 0 -100px;padding:0;}

#service_img1{background-image:url(settings.png); background-repeat:no-repeat;width:200px; height:200px;
    -webkit-animation:spin1 4s linear infinite;
    -moz-animation:spin1 4s linear infinite;
    animation:spin1 4s linear infinite;padding:0; margin:-80px 0 0 -10px;}

@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Step 2

in HTML Code

Live Demo