css - 3d 立方体在 IE10 中不工作

Question

我创建了一个 3d 立方体并让它在 Chrome 和 FF 中工作，但无法在 IE 中工作。我知道 IE 不支持 preserve-3d 并且已经研究了解决方法。问题是，我的父元素上实际上没有 transform，只有 transition 里面有 transform。我尝试将 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) 并期望子级相应地表现。您需要对每个 child 分别应用适当的转换。