在 Firefox 中并排 css 3d 形状挣扎

Question

我正在尝试并排绘制几个 3d 立方体，使用 css 变换。

chrome (v43.0.2357.134)

没问题

但我在 firefox (v39.0) 上苦苦挣扎

3d shapes side by side on fiddle

在 firefox 中，关于 Stacking without z-index(MDN) 的 2D 规则似乎严格适用于这种情况，没有考虑透视深度和观察者的视角。

例如：第一个立方体显示在我的 fiddle 上（从左边开始）：

后侧（黄色）应该完全被左侧（蓝色）隐藏，因为从现在的角度来看，从用户的角度来看，后面是左边的后面。

这里应用的堆叠规则似乎是 html 中出现的顺序，不考虑视角：

表示后边的html元素在第五位，左边在第一位

我试着玩 z-index，它可能只适用于一排立方体，但不能适用于两排。

这感觉像是 firefox 中的错误。这种构造在这个浏览器中是不可能的吗？

现在我最大的希望是 chrome 对缺失的 css 规则宽容，而 firefox 不会。

我尝试了很多调整，但没有结果。

有什么想法吗？

html:

<div ng-controller="MyCtrl">
  <div class="cube-container">
        <div ng-repeat="i in [1,2,3,4,5]" class="cube">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

css:

.cube-container {
      perspective: 1000px;
      transform-style: preserve-3d;
      transform: rotateX(15deg) rotateY(28deg);
      height: 500px;
      margin-top: 68px;
    }
    .cube {
      position: relative;
      height: 60px;
      width: 60px;
      float: left;
      transform-style: preserve-3d;
    }
    .cube > div {
      position: absolute;
      height: 60px;
      width: 60px;
    }
    .cube > div:nth-child(1) {
      background-color: #3218db;
      transform: rotateY(90deg);
      transform-origin: left;
    }
    .cube > div:nth-child(2) {
      background-color: #e41850;
      transform: rotateX(0deg);
    }
    .cube > div:nth-child(3) {
      background-color: #52e42f;
      transform: rotateY(-90deg);
      transform-origin: right;
    }
    .cube > div:nth-child(4) {
      background-color: #be53e2;
      transform: translateZ(-60px);
    }
    .cube > div:nth-child(5) {
      background-color: #e4eb2e;
      transform: rotateX(-90deg);
      transform-origin: top;
    }
    .cube > div:nth-child(6) {
      background-color: #7c7373;
      transform: rotateX(90deg);
      transform-origin: bottom;
    }

Answer 1

CSS 中的转换属性尚未在所有浏览器中完全兼容。为了解决这个问题，您必须为每个浏览器编写单独的代码，使用 "webkit" 属性 for Chrome 和 "moz" 属性 for firefox。示例如下：

 .cube > div:nth-child(1) {
  background-color: #3218db;
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  transform-origin: left;
   -webkit-transform-origin: left;
  -moz-transform-origin: left;
};

Answer 2

这可能是 firefox 中的错误。

我很快在报告的错误列表中搜索它，但没有成功。我最终会报告它。

Report a firefox bug

关于

I'm trying to draw several 3d cubes side by side, with css transforms.

我想知道 css 变换是否是执行此操作的 'right' 方法，特别是知道我要绘制的形状不仅是立方体而且不一定是静态的。

所以我挖掘了一下，发现使用 canvas 和 webGL 会更合适。

简而言之，我同意人们所说的 css 3d 变换应该主要用于视觉效果。

3d-in-the-browser-webgl-versus-css-3d-transforms

canvas vs. webGL vs. CSS 3d -> which to choose?

在 Firefox 中并排 css 3d 形状挣扎

Struggling with side by side css 3d shapes in firefox

html

css

3d

firefox

css-transforms