Flip div on click and show other div

by Keval Bhatt

HTML

<span id="parent">
    <div class="box"></div>

    <div class="box1" style="display:none"></div>
       <div class="box2" style="display:none"></div>
</span>

CSS

.box {
    width:30%;
    height:100px;
    background-color:black;
    position:absolute;
}
.box1 {
    width:30%;
    height:100px;
    background-color:red;
}
.box2 {
    width:30%;
    height:100px;
    background-color:green;
}

JavaScript

(function ($) {
    $.fn.rotationDegrees = function () {
        var matrix = this.css("-webkit-transform") || this.css("-moz-transform") || this.css("-ms-transform") || this.css("-o-transform") || this.css("transform");
        if (typeof matrix === 'string' && matrix !== 'none') {
            var values = matrix.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
        } else {
            var angle = 0;
        }
        return angle;
    };
}(jQuery));




var i = 0;
$("div").click(function () {
    var that = this;

    if ($(this).rotationDegrees()) {
        console.log($(this).rotationDegrees());
        var rotateValue ='1'
    } else {
        var rotateValue ='180'
    }
    $(this).animate({

        transformValue: rotateValue
    }, {
        step: function (now, fx) {
            $(this).css('transform', 'perspective(800px) rotatey(' + now + 'deg)');
        },
        complete: function () {
            $(that).hide();
            //$('#box').removeAttr( 'style' );
            var nextObject = $(that).next()
            var nextClass = nextObject.attr('class')
            console.log($('#parent').children().hasClass(nextClass));
            if ($('#parent').children().hasClass(nextClass)) {
                var flipNext = nextClass;
                console.log("true")
            } else {
                console.log("false")
                var flipNext = "box";
                console.log(flipNext);
                
            }

            secondFlip(flipNext)


        },
        duration: 'slow'
    }, 'linear');


});

function secondFlip(nextID) {
    $('.' + nextID).show();
    console.log("-----------");
    console.log($('.' + nextID).rotationDegrees());
    if ($('.' + nextID).rotationDegrees() === 180) {
        
        var rotateValue ='0'
    } else {
        var rotateValue ='-180'
    }
    $('.' +...