3D透視圖在Firefox 34.0或Internet Explorer 11中無法正確顯示

Question

我無法在Internet Explorer 11和Firefox 34.0中顯示所有內容。我有雙重和三重檢查的前綴，並確保有一切的價值。

如果這不起作用，我只能找到另一個可以跨瀏覽器工作的解決方案，但我已經做了很多工作，使它適合我的網站。

更新：我知道它在Firefox上工作。這是一個沒有添加到.pyramid外部選擇器的-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

保留3D是僅在IE測試階段。它不應該工作。

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