CSS3循环动画不适用于IE11

我正在尝试使用“preserve-3d”制作CSS3动画循环 我的动画在Safari、Mozilla和Chrome上运行得很好，但在IE（11,10…）上却不行

你知道为什么吗

在线演示：

非常感谢,

安托万

<!----------------------- 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 --------*/

我们的一些机构客户
















/*-------------------------CSS---------------------------*/
/*--------图标切换器--------*/
#客户{
宽度：100%；
显示：内联块；
溢出：隐藏；
边框顶部：1px实心#ccc；
边框底部：1px实心#ccc；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms-Boxes尺寸：boder盒；
框大小：边框框；
}
#李英明{
高度：40px；
}
跨度h5{
宽度：20%；
显示：内联块；
位置：相对位置；
文本对齐：左对齐；
左：0；
保证金：0自动；
高度：自动；
}
.集装箱{
-webkit透视图：1000px；
-moz透视图：1000px；
-ms透视图：1000px；
透视图：1000px；
显示：内联块；
宽度：19%；
位置：相对位置；
左边框：1px实心#ccc；
}
/*动画立方体*/
.立方体{
-webkit动画：旋转10秒0秒无限；
-moz动画：旋转10秒0秒无限；
-ms动画：旋转10秒，无限大；
动画：旋转10秒，无限大；
位置：相对位置；
列表样式：无；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
-webkit动画计时功能：轻松输出；
-moz动画计时功能：放松；
-ms动画计时功能：放松；
动画计时功能：放松；
}
.第二{
-webkit动画延迟：0.5s；
-moz动画延迟：0.5s；
-ms动画延迟：0.5s；
动画延迟：0.5s；
}
.第三{
-webkit动画延迟：0.7s；
-moz动画延迟：0.7s；
-ms动画延迟：0.7s；
动画延迟：0.7s；
}
.4{
-webkit动画延迟：1s；
-moz动画延迟：1s；
-ms动画延迟：1s；
动画延迟：1s；
}
.容器，.面{
高度：3.5公分；
填料顶部：.5em；
}
.脸{
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
左：0；
溢出：隐藏；
位置：绝对位置；
左边距：1米；
排名：0；
}
/*面向前卫*/
.前线{
z指数：2；
}
.前iframe{
显示：块；
保证金：0自动；
}
.顶{
-webkit转换：rotateX（90度）translateY（-115px）translateZ（70px）；
-moz变换：rotateX（90度）translateY（-115px）translateZ（70px）；
-ms变换：rotateX（90度）translateY（-115px）translateZ（70px）；
变换：rotateX（90度）translateY（-115px）translateZ（70px）；
}
/*脸阿里埃*/
.回来{
-webkit变换：rotateX（180度）translateY（-85px）translateZ（140px）；
-moz变换：rotateX（180度）translateY（-85px）translateZ（140px）；
-ms变换：rotateX（180度）translateY（-85px）translateZ（140px）；
变换：rotateX（180度）translateY（-85px）translateZ（140px）；
}
.底部{
-webkit变换：rotateX（270度）translateY（25像素）translateZ（70像素）；
-moz变换：rotateX（270度）translateY（25像素）translateZ（70像素）；
-ms变换：rotateX（270度）translateY（25像素）translateZ（70像素）；
变换：rotateX（270度）translateY（25像素）translateZ（70像素）；
}
/*------端部切换器--------*/

不确定我要找的是什么-该网站与Firefox和IE11的外观相同。动画仅与介绍文本下方的“赞助商横幅”相关。FF 28和IE 11似乎都在为这些框制作动画。虽然我不想这么说，但实际上在IE11上看起来更好！我同情你！在IE11上，长方体正在制作动画，但是[face top]&[face back]类的.jpg内容没有显示。只有[face front]可见。我仍然没有看到问题-四个长方体中的每一个都显示三个不同的图像。我想你的问题出在你的电脑上。