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.
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.