在firefox中与并排css 3d形状苦苦挣扎

Question

我试图用css变换并排绘制几个3d立方体。

这对铬很好（v43.0.2357.134）

但我正在努力与火狐（v39.0）

3d shapes side by side on fiddle

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

例如：第一个立方体显示（从左侧）我的小提琴：

后侧（黄色）应完全隐藏在左侧（蓝色），因为从当前的角度来看，从用户的角度来看，后侧位于左侧后方。

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

表示后侧的html元素位于第五位置，左侧位于第一位置。

我尝试使用z-index，它可能几乎不能使用一行多维数据集，但不能使用两行。

这感觉就像firefox中的一个bug。这种浏览器中不可能使用这种结构吗？

现在我最大的希望是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

这可能是firefox中的一个错误。

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

Report a firefox bug

关于

我试图用css变换并排绘制几个3d立方体。

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

所以我挖了一点，发现使用画布和webGL会更合适。

简而言之，我同意人们说css 3d变换应该主要用于眼睛糖果。

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

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

Answer 2

CSS中的transform属性尚未在所有浏览器中完全兼容。要解决此问题，您必须使用Chrome的“webkit”属性和firefox的“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;
};