return image back to the original position after a 180 degree rotation

Question

I have written code below to flip an image . I am setting -webkit-transform=rotateY(180deg), but again on the click event I want to bring image back to the original position. I tried -180 value but it's not working.

var status=1;
function flipIt(obj) {
    //$(obj).wrap("<div class='centerImage'></div>")

    console.log("value before Function status   "+status);

    if(status==1) {
        $(obj).css("-webkit-transform-style","preserve-3d");
        $(obj).css("-webkit-transition","all 1.0s linear");
        $(obj).css("transform-style","preserve-3d");
        $(obj).css("transition","all 1.0s linear");

        $(obj).css("-webkit-transform","rotateY(180deg)");
        $(obj).css("transform","rotateY(180deg)");
        //$(obj).css("box-shadow","-5px 5px 5px #aaa");

        status=0;
        console.log("after if value set status   "+status);
    } else {
        $(obj).css("-webkit-transform-style","preserve-3d");
        $(obj).css("-webkit-transition","all 1.0s linear");
        $(obj).css("transform-style","preserve-3d");
        $(obj).css("transition","all 1.0s linear");

        $(obj).css("-webkit-transform","rotateY(-180deg)");
        $(obj).css("transform","rotateY(-180deg)");
        status=1;

        console.log("ater else value set status   "+status);
    }
}

Please Help.

Answer 1

Try setting it to 0, not minus 180.

$(obj).css("transform","rotateY(0deg)");

Then it won't rotate as I think it's calculated relative to its original rotation.

Answer 2

I'm a bit new to it myself, but I believe that rotations are relative to the original position, so setting the rotation to 0 would make it go back to the original rotation. On a related note, when using transitions remember that a rotation of x is not the same as 360 - x, it will affect which direction it rotates.