Html 在firefox中并排使用css 3d形状

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

这在chrome v43.0.2357.134上没有问题

但我正在与FirefoxV39.0抗争

在firefox中，2D规则似乎严格适用于这种情况，而不考虑透视深度和观看者的视角

例：对于我小提琴左侧显示的第一个立方体：

后面的黄色应该完全被左边的蓝色遮住， 因为从当前的角度来看，从用户的角度来看，后侧在左侧的后面

这里应用的堆叠规则似乎是html中的显示顺序， 在不考虑前景的情况下：

代表后侧的html元素位于第五个位置，左侧位于第一个位置

我试着使用z-index，它可能只适用于一行多维数据集，但不适用于两行

这感觉像firefox中的一个bug。这种构造在浏览器中不可能吗

现在，我最大的希望是chrome对css规则的缺失持宽容态度，而firefox则不然

我尝试了一系列的调整，但没有结果

有什么想法吗

html:

---

CSS中的transform属性尚未完全兼容所有浏览器。为了解决这个问题，你必须使用浏览器浏览器的webkit属性和火狐浏览器的moz属性为每个浏览器编写单独的代码。示例如下：

 .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;
};

---

这可能是firefox中的一个bug

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

关于

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

我想知道css转换是否是做到这一点的“正确”方法，尤其是知道我想要绘制的形状不仅仅是立方体，而且不一定是静态的

所以我稍微挖掘了一下，发现使用画布和webGL更合适

简而言之，我同意有人说css 3d转换应该主要用于吸引眼球

---

我使用的属性不需要供应商前缀。这些转换在chrome和Firefox中都是本机已知并应用的。这一定是最近的更新。要么是这样，要么就是我有点落后了。克里斯，Firefox支持自Firefox16以来未经修改的版本。我们目前在Firefox 39上

.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;
    }

 .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;
};