0

I have made a flipping counter that increases each time the card flips and shows the value of counter on the face that is being displayed. It is working fine in all browsers except Internet Explorer(IE11). In IE it is not showing the other face instead it is displaying the same face inverted.

Here is my code:

var main = function () { 
    var current = ".back";
    var next = ".front";
    var i = 0;
    var interval;
    var startTimer = function () {
        interval = setInterval(function () {
            $('#ann_card').toggleClass("transformRotate");
            $(current).html("<p>" + i + "</p>");
            var temp = current;
            current = next;
            next = temp;
            i++;
        }, 1000);
    };
    startTimer();
};
$(document).ready(main);
.ann_container {
    width: 400px;
    height: 280px;
    position: absolute;
    perspective: 800px;
}

.ann_card {
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s linear;
    transform-origin: center center;
}

.transformRotate {
    transform: rotateX(180deg);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: center center;
    transition: 0.5s;
}

.face.front {
    background-color: red;
    transform: rotateX(0deg);
}

.face.back {
    background-color: green;
    color: white;
    transform: rotateX(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="ann_container" id="ann_container">
        <div class="ann_card" id="ann_card">
            <div class="face front">
                <p>this is front</p>
            </div>
            <div class="face back">
                <p>this is back</p>
            </div>
        </div>
    </div>
</body>
Vaibhav Rathore
  • 301
  • 2
  • 10
  • 1
    counter is not defined – raven Apr 29 '16 at 13:45
  • "transform-style: preserve-3d" is [unsupported in IE](http://caniuse.com/#feat=transforms3d). This [SO answer](http://stackoverflow.com/a/22849231/500890) explains how to work around this limitation. – lampyridae Apr 29 '16 at 14:41

0 Answers0