Question

我无法在Internet Explorer 11和Firefox 34.0中显示它。我已经检查了双重和三重检查的前缀，并确保所有内容都有值。

如果这不起作用，我只需要找到另一种可以在浏览器中使用的解决方案，但是我已经做了很多工作，因为它适合我的网站。

更新：我让它在Firefox上运行。这是一个-moz前缀未添加到.pyramid-outer选择器。然而，现在，我在＆＃34; +＆＃34;中获得金字塔上方的线条。图案。有没有办法减轻这种情况？我还得到它在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

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

1 个答案: