Question

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

对于chrome（v43.0.2357.134）

，这没关系

chrome

但我正在与firefox（v39.0）挣扎

firefox

3d shapes side by side on fiddle

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

Ex：因为第一个立方体（从左边）显示在我的小提琴上：

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

这里应用的堆叠规则似乎是html中的外观顺序，没有考虑到这个观点：

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

我尝试使用whith 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转换是否是正确的＆＃39;这样做的方法，尤其是我知道我想要绘制的形状不仅仅是立方体而且不一定是静态的。

所以我稍微挖了一下，发现使用画布和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属性尚未在所有浏览器中完全兼容。为了解决这个问题，你必须使用＆＃34; webkit＆＃34;为每个浏览器编写单独的代码。 Chrome和＆＃34; moz＆＃34; 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;
};

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

2 个答案: