How to Create Auto rotate(spin) image using css3

Sandilyan 2/13/2017 05:31:00 am
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.


auto-rotate effect using css3

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>

Tags
Reactions

Post a Comment

0 Comments