CSS3 image rotate: image simply not rotating

Question

I have an image within a div with the following CSS:

#container {
  margin: auto;
  width: 500px;
}

#container img:hover{
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}

But the image simply is not moving at all. I have checked in Chromes console and there are no CSS errors.

Would anyone know what I am doing wrong?

Answer 1

As you are rotating 360 degrees, nothing is happening (because 360 degrees is a full circle). What you probably are trying to achieve is to animate this rotation so that it is visible. For this you need to set a transition in your css:

#container {
  margin: auto;
  width: 500px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#container img:hover{
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}