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）并期望子级执行相应的操作。您需要单独为每个孩子应用适当的变换。

3d立方体不在IE10工作

1 个答案: