Implement CSS3 Custom 3D Flip Animation in IE8+ - html

Question

I have problem to running My CSS3 3D flip Animation in IE Browser. The problem is backface-visibility CSS3 is not work. So if box was flipped, the back box is not showing.
Below is my code
CSS
.flip-container {
-ms-perspective: 1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}
.click {
cursor: pointer;
}
.flip-container, .front, .back, .behind {
width: 150px;
height: 150px;
background-color: #d5d5d5;
}
/* flip parent stylesheet */
.flipper-up,
.flipper-right,
.flipper-bottom,
.flipper-left,
.behind {
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
-ms-transition: 0.8s;
-webkit-transition: 0.8s;
transition: 0.8s;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* hide back of pane during swap */
.flipper-up .front, .flipper-up .back,
.flipper-right .front, .flipper-right .back,
.flipper-bottom .front, .flipper-bottom .back,
.flipper-left .front, .flipper-left .back {
color: #fff;
font-size: 32px;
text-align: center;
line-height: 150px;
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
}
.behind {
z-index: 0;
background-color: purple;
text-align: center;
line-height: 150px;
cursor: pointer;
}
.click {
cursor: pointer;
}
/* Flip to up */
.flipper-up {
z-index: 5;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.flipper-up > .front {
/* for firefox 31 */
background-color: red;
-ms-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.flipper-up > .back {
background-color: red;
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.flip.flipper-up {
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* Flip to right */
.flipper-right {
z-index: 3;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
}
.flipper-right > .front {
/* for firefox 31 */
background-color: blue;
-ms-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.flipper-right > .back {
background-color: blue;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip.flipper-right {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Flip to bottom */
.flipper-bottom {
z-index: 1;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.flipper-bottom > .front {
/* for firefox 31 */
background-color: green;
-ms-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.flipper-bottom > .back {
background-color: green;
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.flip.flipper-bottom {
-ms-transform: rotateX(-180deg);
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
/* Flip to left */
.flipper-left {
z-index: 4;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.flipper-left > .front {
/* for firefox 31 */
background-color: black;
-ms-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* back, initially hidden pane */
.flipper-left > .back {
background-color: black;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip.flipper-left {
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip {
cursor: default !important;
z-index: 10;
}
HTML
<div class="flip-container">
<div class="click flipper-up">
<div class="front">
1
</div>
<div class="back">
2
</div>
</div>
<div class="click flipper-left">
<div class="front">
3
</div>
<div class="back">
4
</div>
</div>
<div class="click flipper-right">
<div class="front">
5
</div>
<div class="back">
6
</div>
</div>
<div class="click flipper-bottom">
<div class="front">
7
</div>
<div class="back">
8
</div>
</div>
<div class="behind" title="Click here to close the box!">
click to close
</div>
</div>
jQuery
$(document).ready(function() {
$('.click').click(function(){
$(this).addClass('flip');
});
$('.behind').click(function() {
setTimeout(function(){
//wait for card1 flip to finish and then flip 2
$(".flipper-bottom").removeClass('flip');
}, 300);
setTimeout(function(){
//wait for card1 flip to finish and then flip 2
$(".flipper-right").removeClass('flip');
}, 600);
setTimeout(function(){
//wait for card1 flip to finish and then flip 2
$(".flipper-left").removeClass('flip');
}, 900);
setTimeout(function(){
//wait for card1 flip to finish and then flip 2
$(".flipper-up").removeClass('flip');
}, 1200);
});
});
http://jsfiddle.net/dhanangpratama/jxz08xva/