How to Create Auto rotate(spin) image using css3 | Sanwebcorner

How to Create Auto rotate(spin) image using css3

This post is helps you how to create auto rotate image using css3, This is very easy and simple to create the auto spin or auto rotate effect. Click below demo button to see the live auto rotate image. In this example helps you somewhere in animated webpages.


code for Auto Rotate Image:


<html>
<head>
<title>Auto spin effect using css3</title>
<style>
.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    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); } }
</style>
</head>
<body>
<img class="image" src="world.png" alt="" width="120" height="120">
</body>
</html>