Question

I created a simple CSS transition to rotate a div 360 degrees in this page (the disc menu), but it appears to be working only on Firefox Nightly. I also tried in Firefox 15 (the release build) and Google Chrome. Both only move the image to the left a bit and show some graphical artifacts around the overlying text. This is the CSS related to the disc (the rotating image is actually a empty div with set size inside the real menu div):

#menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    background: url("img/disco.png");
    background-size: 100% 100%;
    position: relative;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

Answer 1

Make sure to include all the prefixes. Transitions have been unprefixed in FF16 and Opera 12.5. (-ms-transition isn’t useful because IE9 doesn’t support it and IE10 is unprefixed).

-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;

You also don’t need the transition rule in the second style declaration since it is the same as the first.