在IE8 +中实现CSS3自定义3D翻转动画

Question

我在IE浏览器中运行My CSS3 3D翻转动画时遇到问题。问题是背面可见性CSS3不起作用。因此，如果框被翻转，则后框不会显示。

以下是我的代码

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/