3D 透视在 Firefox 34.0 或 Internet Explorer 11 中未正确显示

Question

我无法让它在 Internet Explorer 11 和 Firefox 34.0 中显示。我对前缀进行了两次和三次检查，并确保所有内容都有值。

如果这不起作用，我只需要找到另一个可以跨浏览器工作的解决方案，但我已经投入了大量工作以使其适合我的网站。

更新：我让它在 Firefox 上运行。这是一个未添加到 .pyramid-outer 选择器的 -moz 前缀。但是，现在，我在金字塔上方以“+”模式绘制线条。有没有办法缓解这种情况？我还让它在 IE 11 中显示一个简单的三角形，但我仍然无法让它保留 3D。

Updated Screenshot in Firefox 34.0

Updated Screenshot in IE 11

.pyramid, .pyramid-outer, .pyramid-inner {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.viewport {
width: 500px;
height: 200px;
margin-left: auto;
margin-right: auto;
position: relative;
top: -200px;

-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 800px;

-webkit-perspective-origin: 50% 150%;
-moz-perspective-origin: 50% 150%;
-o-perspective-origin: 50% 150%;
-ms-perspective-origin: 50% 150%;
perspective-origin: 50% 150%;
}

.pyramid {
width: 100px;
height: 100px;
position: absolute;
/*-webkit-transform: rotateY(45deg);*/
}

.pyramid-outer {
-webkit-transform: translate3d(200px, 250px, 400px) rotateX(-22deg);
}

.pyramid-base, .pyramid-face {
opacity: 0.5;
position: absolute;
}

.pyramid-base {
width: 100px;
height: 100px;
background-color: #ff0000;
background-image: url(http://romanliutikov.com/lab/css3-3d-primitives/img.png);

-webkit-transform: rotateX(90deg) translate3d(0, 0, -23px);
-moz-transform: rotateX(90deg) translate3d(0, 0, -23px);
-o-transform: rotateX(90deg) translate3d(0, 0, -23px);
-ms-transform: rotateX(90deg) translate3d(0, 0, -23px);
transform: rotateX(90deg) translate3d(0, 0, -23px);
}

.pyramid-face {
width: 0;
height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;

-webkit-transform-origin: 50% 87%;
-moz-transform-origin: 50% 87%;
-o-transform-origin: 50% 87%;
-ms-transform-origin: 50% 87%;
transform-origin: 50% 87%;
}

.pyramid-face:nth-child(2) {
border-bottom:100px solid #e04545;

-webkit-transform: rotateX(30deg) translate3d(0, 0, 50px);
-moz-transform: rotateX(30deg) translate3d(0, 0, 50px);
-o-transform: rotateX(30deg) translate3d(0, 0, 50px);
-ms-transform: rotateX(30deg) translate3d(0, 0, 50px);
transform: rotateX(30deg) translate3d(0, 0, 50px);
}

.pyramid-face:nth-child(3) {
border-bottom:100px solid #FFFF99;

-webkit-transform: rotateY(90deg) rotateX(-30deg) translate3d(0, 0, -50px);
-moz-transform: rotateY(90deg) rotateX(-30deg) translate3d(0, 0, -50px);
-o-transform: rotateY(90deg) rotateX(-30deg) translate3d(0, 0, -50px);
-ms-transform: rotateY(90deg) rotateX(-30deg) translate3d(0, 0, -50px);
transform: rotateY(90deg) rotateX(-30deg) translate3d(0, 0, -50px);
}

.pyramid-face:nth-child(4) {
border-bottom:100px solid #97c25f;

-webkit-transform: rotateY(90deg) rotateX(30deg) translate3d(0, 0, 50px);
-moz-transform: rotateY(90deg) rotateX(30deg) translate3d(0, 0, 50px);
-o-transform: rotateY(90deg) rotateX(30deg) translate3d(0, 0, 50px);
-ms-transform: rotateY(90deg) rotateX(30deg) translate3d(0, 0, 50px);
transform: rotateY(90deg) rotateX(30deg) translate3d(0, 0, 50px);
}

.pyramid-face:nth-child(5) {
border-bottom:100px solid #4ccfc8;

-webkit-transform: rotateX(-30deg) translate3d(0, 0, -50px);
-moz-transform: rotateX(-30deg) translate3d(0, 0, -50px);
-o-transform: rotateX(-30deg) translate3d(0, 0, -50px);
-ms-transform: rotateX(-30deg) translate3d(0, 0, -50px);
transform: rotateX(-30deg) translate3d(0, 0, -50px);
}

.pyramid {
-webkit-animation: cube 8s linear infinite;
-ms-animation: cube 8s linear infinite;
-o-animation: cube 8s linear infinite;
animation: cube 8s linear infinite;
}

@-webkit-keyframes cube {
0% {}
100% {-webkit-transform: rotateY(360deg);   }
}

@-o-keyframes cube {
0% {}
100% {-o-transform: rotateY(360deg);    }
}

@-ms-keyframes cube {
0% {}
100% {-ms-transform: rotateY(360deg);   }
}

@keyframes cube {
0% {}
100% {transform: rotateY(360deg);   }
} 

Answer 1

Preserve 3D 仅在 IE 中处于测试阶段。应该还不行。

https://status.modern.ie/csstransformspreserve3d?term=preserve