Вернуть изображение обратно в исходное положение после поворота на 180 градусов

Я написал код ниже, чтобы перевернуть изображение. Я устанавливаю -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);
    }
}

Пожалуйста помоги.

2 ответа

Решение

Попробуйте установить его в 0, а не в минус 180.

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

Тогда он не будет вращаться, так как я думаю, что он рассчитан относительно исходного вращения.

Я сам немного новичок в этом, но я считаю, что повороты относятся к исходному положению, поэтому установка поворота на 0 вернет его к исходному повороту. С другой стороны, при использовании переходов помните, что вращение x не совпадает с 360 - x, это будет влиять на то, в каком направлении он вращается.

Другие вопросы по тегам