CSS3 Rotate Animation

<img src="" alt="" width="120" height="120">

Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.

I guess something's wrong with the CSS below, as it just stays still.

.image { float: left; margin: 0 auto; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
}

7 Answers

Here is a demo. The correct animation CSS:

.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); }
}

<img src="" alt="" width="120" height="120">

---

Some notes on your code:

1. You've nested the keyframes inside the .image rule, and that's incorrect
2. float:left won't work on absolutely positioned elements
3. Have a look at caniuse: IE10 doesn't need the -ms- prefix

5

To achieve the 360 degree rotation, here is the Working Solution.

The HTML:

<img src="your-image.png">

The CSS:

.image { overflow: hidden; transition-duration: 0.8s; transition-property: transform;
}
.image:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg);
}

You have to hover on the image and you will get the 360 degree rotation effect.

PS: Add a -webkit- extension for it to work on chrome and other webkit browers. You can check the updated fiddle for webkit HERE

4

I have a rotating image using the same thing as you:

.knoop1 img{ position:absolute; width:114px; height:114px; top:400px; margin:0 auto; margin-left:-195px; z-index:0; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden;
}
.knoop1:hover img{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg);
}

3

try this easy

 .btn-circle span { top: 0; position: absolute; font-size: 18px; text-align: center; text-decoration: none; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;
}
.btn-circle span :hover { color :silver;
}
/* rotate 360 key for refresh btn */
@-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); } } 

 <button type="button" ><span>&#x21bb;</span></button>

if you want to flip image you can use it.

.image{ width: 100%; -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }

The another method to rotate an object in the background using css3, check out the below css3 code here:

.floating-ball-model-3 > span { animation-name: floating-ball-model-3; animation-duration: 7s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: floating-ball-model-3; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: floating-ball-model-3; -moz-animation-duration: 7s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: floating-ball-model-3; -ms-animation-duration: 7s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: floating-ball-model-3; -o-animation-duration: 7s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear;
}
@keyframes floating-ball-model-3 { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

1

Here this should help you

The below jsfiddle link will help you understand how to rotate a image.I used the same one to rotate the dial of a clock.

var rotation = function (){ $("#image").rotate({ angle:0, animateTo:360, callback: rotation, easing: function (x,t,b,c,d){ return c*(t/d)+b; } });
}
rotation();

Where: • t: current time,

• b: begInnIng value,

• c: change In value,

• d: duration,

• x: unused

No easing (linear easing): function(x, t, b, c, d) { return b+(t/d)*c ; }

3