Home » CSS 3 » CSS3 Rotate Animation

CSS3 Rotate Animation

How to create a rotating image with CSS3? (CSS3 Rotate Animation)

With the introduction of CSS3, animation is possible without using jQuery or Javascript. Here, I am giving an example of an image, rotating only with CSS. CSS3 animate and transform properties are used for achieving rotating effect.

HTML for CSS3 Rotate Animation

<img src="images/rotating_image.png" alt="Rotating Image" width="444" height="445">

CSS for CSS3 Rotate Animation

    
.my_image {
    width: 444px;
    height: 445px;
    margin:30px 0 0 30px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-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); } }

Demo for CSS3 Rotate Animation

CSS3 Rotate Animation

Read more about CSS3 Animations

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*