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 CodeLive Demo
No comments :
Post a Comment