jquery - CSS transform rotation is not smooth

Question

I have a css transform on a toggle. The transform rotates the image 90 degrees then on toggle rotates it back. Rotating to 90 is nice and smooth but the way back is jumpy. What am I not getting? Here's my code and fiddle with rtc.

CSS:

.rotate1 {
    -webkit-transform: rotate(0deg) translate3d( 0, 0, 0);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.rotate2 {
  -webkit-transform: rotate(90deg) translate3d( 0, 0, 0);
     -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

JS:

$("img").on('click', function(){
    $(this).toggleClass("rotate1 rotate2");
});