CSS3 Rotate Animation

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

With CSS3, we can make an image rotating animation. We use css3 animation for achieving this. Keyframe is used for giving specific events in the animation.

HTML for CSS3 Rotate Animation

<img src="images/rotating_image.png" alt="CSS3 Rotate Animation" width="444" height="445">

CSS for CSS3 Rotate Animation

.my_image {
    width: 444px;
    height: 445px;
    margin:-60px 0 0 -60px;
    -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); } }

With the css for my_image we have to add animation function with a name. Here, we are using ‘Spin’ as the name for animation. And with @keyframe, we are adding specific events of animation of the image.

Demo for CSS3 Rotate Animation

CSS3 Rotate Animation

Leave a Reply

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