Can Safari 6.0.2 perform a rotation of more than 360 degrees? I have a simple experiment. Try it in Chrome release(not canary, will break, moz also will break) and Safari.
UPDATE:Since I found the solution, I have edited make it work properly in Chrome and Safari, but I still providing a improper version and proper version for compare.(note: Safari version is 6.0.2 at this time). BTW, I test in MAC only, not yet test in Windows
Improper version : Fail in Safari
Proper version : Simple Experiment
You cannot have multiple transform style at the same time when transitting , example
-webkit-transform: scale(1.0); /*we want rotate, so remove this*/ transform: scale(1.0); /*we want rotate, so remove this*/ -webkit-transition: all .8s ease; transition: all .8s ease;
-webkit-transform: rotate(-900deg); /*we want this to be rotate few cycle*/ transform: rotate(-900deg);
cannot have scale on normal state and rotate for hovering state.
This definetely is a bug(or something else) in safari, because Chrome can handle it properly.