jQuery - Rotating an image on click and rotating back the next click

jQuery - Rotating an image on click and rotating back the next click

I have a fiddle to demonstrate what I'm trying to do.
http://jsfiddle.net/LxtmM/
jQuery:
$(".arrow").on("click", function() {
$(".arrow").toggleClass("rotate").css({ "-moz-transform" :
"rotate(-90deg)", "-webkit-transform" : "rotate(-90deg)",
"-ms-transform" : "rotate(-90deg)", "-o-transform" :
"rotate(-90deg)" });
});
Bascially, I want it so that when you click the arrow it rotates
-90degrees and then rotates back on the next click. I understand that
needs some sort of toggle. But I learned that you can just toggle a class
that has the CSS3 transform rotate.
When you click it, it rotates and adds the class, if you click it again it
removes the class but it doesn't animate back. I'm not sure if I should
expect it rotate back when the rotate class is toggled off but it's not
working nonetheless.
Thanks!