3D立方体在IE10中不工作

Question

我已经创建了一个3D立方体，并且它在Chrome和FF中均可工作，但无法在IE中正常工作。我知道IE不支持preserve-3d，并且已经研究过这个工作。问题是，我的父元素上没有transform，只有transition，里面有变换。我曾尝试将transition: transform 1s添加到所有的孩子，但它似乎没有改变任何东西。任何帮助得到这个在所有浏览器正常工作将不胜感激！这里是一个jsfiddle

HTML：

<div id="options"> 
<ul id="nav"> 
    <li id="front" class="show-front">Show 1</li> 
    <li id="back" class="show-back">Show 2</li> 
    <li id="right" class="show-right">Show 3</li> 
    <li id="left" class="show-left">Show 4</li> 
    <li id="top" class="show-top">Show 5</li> 
    <li id="bottom" class="show-bottom">Show 6</li> 
<ul> 
</div> 
<div class="container"> 
<div id="cube" class="show-front"> 
    <div class="side front">1</div> 
    <div class="side back">2</div> 
    <div class="side right">3</div> 
    <div class="side left">4</div> 
    <div class="side top">5</div> 
    <div class="side bottom">6</div> 
</div> 
</div> 

CSS：

li:hover{ 
    cursor: pointer; 
} 

.container { 
width:400px; 
height:400px; 
position:relative; 
margin:0 auto 40px; 
-webkit-perspective:1000px; 
-moz-perspective:1000px; 
-ms-perspective:1000px; 
-o-perspective:1000px; 
perspective:1000px; 
} 

.container #cube { 
width:100%; 
height:100%; 
position:absolute; 
-webkit-transition:-webkit-transform 1s; 
    -moz-transition:-moz-transform 1s; 
    -ms-transition:-ms-transform 1s; 
    -o-transition:-o-transform 1s; 
    transition:transform 1s 
} 

.container #cube .side { 
background:rgba(204,204,204,.9); 
margin:0; 
display:block; 
position:absolute; 
width:396px; 
height:396px; 
border:2px solid rgba(147,184,189,.8); 
line-height:196px; 
font-size:120px; 
font-weight:700; 
color:#fff; 
text-align:center; 
border-radius:5px; 
box-shadow:0 5px 20px rgba(105,108,109,.3),0 0 8px 5px rgba(208,223,226,.4) inset; 
-webkit-backface-visibility:hidden; 
-moz-backface-visibility:hidden; 
-ms-backface-visibility:hidden; 
-o-backface-visibility:hidden; 
backface-visibility:hidden; 
} 

.container #cube .front { 
-webkit-transform:translateZ(200px); 
-moz-transform:translateZ(200px); 
-ms-transform:translateZ(200px); 
-o-transform:translateZ(200px); 
transform:translateZ(200px); 
} 

.container #cube .back { 
-webkit-transform:rotateX(-180deg) translateZ(200px); 
-moz-transform:rotateX(-180deg) translateZ(200px); 
-ms-transform:rotateX(-180deg) translateZ(200px); 
-o-transform:rotateX(-180deg) translateZ(200px); 
transform:rotateX(-180deg) translateZ(200px); 
} 

.container #cube .right { 
-webkit-transform:rotateY(90deg) translateZ(200px); 
-moz-transform:rotateY(90deg) translateZ(200px); 
-ms-transform:rotateY(90deg) translateZ(200px); 
-o-transform:rotateY(90deg) translateZ(200px); 
transform:rotateY(90deg) translateZ(200px); 
} 

.container #cube .left { 
-webkit-transform:rotateY(-90deg) translateZ(200px); 
-moz-transform:rotateY(-90deg) translateZ(200px); 
-ms-transform:rotateY(-90deg) translateZ(200px); 
-o-transform:rotateY(-90deg) translateZ(200px); 
transform:rotateY(-90deg) translateZ(200px); 
} 

.container #cube .top { 
-webkit-transform:rotateX(90deg) translateZ(200px); 
-moz-transform:rotateX(90deg) translateZ(200px); 
-ms-transform:rotateX(90deg) translateZ(200px); 
-o-transform:rotateX(90deg) translateZ(200px); 
transform:rotateX(90deg) translateZ(200px); 
} 

.container #cube .bottom { 
-webkit-transform:rotateX(-90deg) translateZ(200px); 
-moz-transform:rotateX(-90deg) translateZ(200px); 
-ms-transform:rotateX(-90deg) translateZ(200px); 
-o-transform:rotateX(-90deg) translateZ(200px); 
transform:rotateX(-90deg) translateZ(200px); 
} 

.container #cube.show-front { 
-webkit-transform:translateZ(-200px); 
-moz-transform:translateZ(-200px); 
-ms-transform:translateZ(-200px); 
-o-transform:translateZ(-200px); 
transform:translateZ(-200px); 
} 

.container #cube.show-back { 
-webkit-transform:translateZ(-200px) rotateX(-180deg); 
-moz-transform:translateZ(-200px) rotateX(-180deg); 
-ms-transform:translateZ(-200px) rotateX(-180deg); 
-o-transform:translateZ(-200px) rotateX(-180deg); 
transform:translateZ(-200px) rotateX(-180deg); 
} 

.container #cube.show-right { 
-webkit-transform:translateZ(-200px) rotateY(-90deg); 
-moz-transform:translateZ(-200px) rotateY(-90deg); 
-ms-transform:translateZ(-200px) rotateY(-90deg); 
-o-transform:translateZ(-200px) rotateY(-90deg); 
transform:translateZ(-200px) rotateY(-90deg); 
} 

.container #cube.show-left { 
-webkit-transform:translateZ(-200px) rotateY(90deg); 
-moz-transform:translateZ(-200px) rotateY(90deg); 
-ms-transform:translateZ(-200px) rotateY(90deg); 
-o-transform:translateZ(-200px) rotateY(90deg); 
transform:translateZ(-200px) rotateY(90deg); 
} 

.container #cube.show-top { 
-webkit-transform:translateZ(-200px) rotateX(-90deg); 
-moz-transform:translateZ(-200px) rotateX(-90deg); 
-ms-transform:translateZ(-200px) rotateX(-90deg); 
-o-transform:translateZ(-200px) rotateX(-90deg); 
transform:translateZ(-200px) rotateX(-90deg); 
} 

.container #cube.show-bottom { 
-webkit-transform:translateZ(-200px) rotateX(90deg); 
-moz-transform:translateZ(-200px) rotateX(90deg); 
-ms-transform:translateZ(-200px) rotateX(90deg); 
-o-transform:translateZ(-200px) rotateX(90deg); 
transform:translateZ(-200px) rotateX(90deg); 
} 

Answer 1

在你的IE不能应用转换属性到父（#cube），并期望孩子相应的行为。您需要分别对每个孩子应用适当的转换。