我制作了一个翻转计数器，每次卡片翻转时都会增加，并显示正在显示的面部上的计数器值。它在除Internet Explorer（IE11）之外的所有浏览器中都能正常工作。在IE中，它没有显示另一个脸，而是显示相同的脸部反转。
这是我的代码：
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>