0

我在下面编写了代码来翻转图像。我正在设置-webkit-transform=rotateY(180deg)，但再次在click我想将图像恢复到原始位置的事件中。我尝试-180了价值，但它不起作用。

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);
    }
}

请帮忙。

4

2 回答 2

4

尝试将其设置为 0，而不是负 180。

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

然后它不会旋转，因为我认为它是相对于其原始旋转计算的。

于 2013-05-03T09:31:10.897 回答
1

我自己对它有点陌生，但我相信旋转是相对于原始位置的，所以将旋转设置为 0 会使其回到原始旋转。在相关的说明中，当使用转换时，请记住 x 的旋转与 360 - x 不同，它将影响它旋转的方向。

于 2013-05-03T09:39:12.337 回答