How to repeat a rotate transformation on mouse click?

Problem

Don`t blame me for this question, I´m really new to jquery!

I have an image (hamburger icon for a nav-menu) and would like to repeat the rotation when I click the image.

$(document).ready(function(){
$('#nav-toggle').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)"
    });
});
Problem courtesy of: andalusi

Solution

if you want the "#nav-toogle" to rotate "90deg" for every click you can do

$('#nav-toggle').click(function(){
    if($(this).data("deg")){
         $(this).data("deg",$(this).data("deg")+90);
    }
    else{
         $(this).data("deg",90);
    }
    $(this).css({
        "-webkit-transform": "rotate("+$(this).data("deg")+"deg)",
        "-moz-transform": "rotate("+$(this).data("deg")+"deg)",
        "transform": "rotate("+$(this).data("deg")+"deg)"
    });
});    

http://jsfiddle.net/QrKrX/

Solution courtesy of: Abraham Uribe

Discussion

Take your anonomous function and break it out. That way, you can call it all you want.

$(document).ready(function(){
$('#nav-toggle').click(function(){
    transform($(this));
});

$('<item>').onMouseClick(function(){
    transform($(this));
});

function transform(var nav){
    nav.css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)"
    }
Discussion courtesy of: DFord

This recipe can be found in it's original form on Stack Over Flow.