Struggling with side by side css 3d shapes in firefox

Question

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

This is alright with chrome (v43.0.2357.134)

but i'm struggling whith firefox (v39.0)

3d shapes side by side on fiddle

In firefox, it seems that the 2D rules regarding Stacking without z-index(MDN) applies strictly in this case, without considering the perspective depth and the viewer point of view.

Ex : for the first cube showed (from the left) on my fiddle:

the rear side(yellow) should be completely hided by the left side(blue), because with the current perspective, from the user point of view, the rear side is behind the left side.

It seems the stacking rule applied here is the order of appearence in html, whithout considering the perspective:

the html element representing the rear side is in the fifth position, and the left side is in the first one.

I tried to play whith z-index, and it may barely work with one row of cubes, but not with two.

This feels like a bug in firefox. Is this sort of construct not possible in this browser?

Right now my best hope is that chrome is lenient regarding a missing css rule, and firefox is not.

I tried a bunch of tweaks, without results.

Any ideas?

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

This might be a bug in firefox.

I quickly searched for it in the list of reported bugs without success. I will report it eventually.

Report a firefox bug

About

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

I was wondering if css transformations was the 'right' way to do this, especially knowing that the shapes i want to draw are not only cubes and are not bound to be static.

So i dig a little and found that using a canvas and webGL would be more appropriate.

In a nutshell, i agree with people saying that css 3d transforms should mainly be used for eye candy.

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

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

Answer 2

The transform property in CSS is not yet fully compatible across all browsers. To combat this you have to write separate code for each browser using the "webkit" property for Chrome and the "moz" property for firefox. Example below:

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