CSS3循环动画不适用于IE11

Question

我试图使用＆＃34;保存-3d制作CSS3动画循环。＆＃34; 我的动画在Safari，Mozilla和Chrome上运行得很漂亮，但在IE（11,10 ......）

上却没有 你知道为什么吗？

在线演示：http://ingrwf02.cepegra.be/antoine/ericgillis%20rotate/

非常感谢，

Antoine

<!----------------------- HTML:------------------------>
<div id="clients">
    <!--Icons Switcher-->
    <span><h5>Some Of Our <br> Institutional Clients</h5></span>
    <ul class="container">
        <li class="cube">
            <a href="#" class="face front"><img src="images/clients/artbma.png" alt="Baltimore Museum of Art"></a>
            <a href="#" class="face top"><img src="images/clients/artinstitute.png" alt="Art Institute of Chicago"></a>
            <a href="#" class="face back"><img src="images/clients/bnf.png" alt="Bibliothèque Nationale de France"></a>

        </li>
    </ul>
    <ul class="container">
        <li class="cube second">
            <a href="#" class="face front"><img src="images/clients/clark.png" alt="The Sterling and Francine Clark Art Institute"></a>
            <a href="#" class="face top"><img src="images/clients/custodia.png" alt="Fondation Custodia"></a>
            <a href="#" class="face back"><img src="images/clients/getty.png" alt="Getty Museum"></a>
        </li>
    </ul>
    <ul class="container">
        <li class="cube third">
            <a href="#" class="face front"><img src="images/clients/lacma.png" alt="LACMA - Los Angeles County Museum of Art"></a>
            <a href="#" class="face top"><img src="images/clients/moma.png" alt="MoMA- Museum of Modern Art"></a>
            <a href="#" class="face back"><img src="images/clients/ngoi.png" alt="The National Gallery of Ireland"></a>
        </li>
    </ul>
    <ul class="container">
        <li class="cube four">
            <a href="#" class="face front"><img src="images/clients/rijksmuseum.png" alt="Rijksmuseum Amsterdam"></a>
            <a href="#" class="face top"><img src="images/clients/tmmoa.png" alt="The Metropolitan Museum"></a>
            <a href="#" class="face back"><img src="images/clients/vangogh.png" alt="Van Gogh Museum"></a>
        </li>
    </ul>
</div>



/*-------------------------CSS---------------------------*/
/*-------- Icons Switcher --------*/

#clients{
    width: 100%;
    display: inline-block;
    overflow: hidden;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    -ms-boxsizing: boder-box; 
    box-sizing: border-box;
}

#clients li img{
    height: 40px;
}

span h5{
    width:20%;
    display:inline-block;
    position: relative;
    text-align: left;
    left:0;
    margin:0 auto;
    height: auto;

}

.container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    display: inline-block;
    width:19%;
    position: relative;
    border-left:1px solid #ccc;
}

/* Animation cubique */
.cube {
    -webkit-animation: spin 10s 0s infinite;
    -moz-animation: spin 10s 0s infinite;
    -ms-animation: spin 10s 0s infinite;
    animation: spin 10s 0s infinite;
    position: relative;
    list-style: none;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.second {

    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.third {

    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.four {

    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
}


.container, .face {
    height: 3.5em;
    padding-top:.5em;
}

.face {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    left: 0;
    overflow: hidden;
    position: absolute;
    margin-left:1em;
    top: 0;
}

/* face avant */
.front {
    z-index: 2;
}

.front iframe {
    display: block;
    margin: 0 auto;
}


.top {
    -webkit-transform: rotateX(90deg) translateY(-115px) translateZ(70px);
    -moz-transform: rotateX(90deg) translateY(-115px) translateZ(70px);
    -ms-transform: rotateX(90deg) translateY(-115px) translateZ(70px);
    transform: rotateX(90deg) translateY(-115px) translateZ(70px);

}

/* face arrière */
.back {
    -webkit-transform: rotateX(180deg) translateY(-85px) translateZ(140px);
    -moz-transform: rotateX(180deg) translateY(-85px) translateZ(140px);
    -ms-transform: rotateX(180deg) translateY(-85px) translateZ(140px);
    transform: rotateX(180deg) translateY(-85px) translateZ(140px);
}

.bottom {
    -webkit-transform: rotateX(270deg) translateY(25px) translateZ(70px);
    -moz-transform: rotateX(270deg) translateY(25px) translateZ(70px);
    -ms-transform: rotateX(270deg) translateY(25px) translateZ(70px);
    transform: rotateX(270deg) translateY(25px) translateZ(70px);

}

/*------ End Switcher --------*/