如何以跨浏览器的方式堆叠矩形棱镜？

Question

我正在尝试用较短的堆叠矩形棱镜创建一个立方体，但遇到了一些问题。我还不关心IE，但我担心Chrome，FF和Safari之间的渲染存在巨大差异。

Chrome（v44.0.2403.155）

Safari（v8.0.3）

Firefox（v40.0.2）

点击此处的实时演示：http://codepen.io/okeegan/pen/yNWNaw

基本结构（为简洁起见）：

<div class="allsort positioned"><!-- Wrapper -->
    <div class="allsort__layer"><!-- Individual prism in cube -->
        <div class="allsort__layer-side bottom"></div><!-- side of prism -->
        <div class="allsort__layer-side left"></div>
        <div class="allsort__layer-side right"></div>
        <div class="allsort__layer-side top"></div>
        <div class="allsort__layer-side front"></div>
        <div class="allsort__layer-side back"></div>
    </div>
</div>

使用以下样式：

.page {
  perspective: 1000px;
  position: fixed;
  width: 100%;
  height: 100%;
}

.allsort {
  backface-visibility: visible;
  transition: all 2s;
  position: relative;
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.allsort.positioned .allsort__layer.pink-1 {
  transform: translateY(0) rotateX(-45deg) rotateZ(45deg);
}

.allsort.positioned .allsort__layer.black-1 {
  transform: translateY(8px) rotateX(-45deg) rotateZ(45deg);
}

.allsort.positioned .allsort__layer.cream {
  transform: translateY(16px) rotateX(-45deg) rotateZ(45deg);
}

.allsort.positioned .allsort__layer.black-2 {
  transform: translateY(24px) rotateX(-45deg) rotateZ(45deg);
}

.allsort.positioned .allsort__layer.pink-2 {
  transform: translateY(30px) rotateX(-45deg) rotateZ(45deg);
}


  .allsort__layer {
    backface-visibility: visible;
    transform-style: preserve-3d;
    transform: translateY(1000px) rotateX(-45deg) rotateZ(45deg);
    transition: all 2s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
  }

    .allsort__layer-side {
      backface-visibility: visible;
      transition: all 400ms;
      transition-delay: 2s;
      transform-origin: 50% 50%;
    }

      .allsort__layer-side.top {
        background-color: magenta !important;
        height: 55px;
        left: 0;
        position: absolute;
        top: 0;
        width: 55px;
      }

      .allsort__layer-side.bottom {
        transform: translateZ(12px);
        background-color: yellow !important;
        height: 55px;
        left: 0;
        position: absolute;
        top: 0;
        width: 55px;
      }

      .allsort__layer-side.left {
        transform-origin: top center;
        transform: rotateX(90deg);
        background-color: green !important;
        height: 12px;
        left: 0;
        position: absolute;
        top: 0;
        width: 55px;
      }

      .allsort__layer-side.right {
        transform-origin: center left;
        transform: rotateY(-90deg);
        background-color: orange !important;
        height: 55px;
        left: 0;
        position: absolute;
        top: 0;
        width: 12px;
      }

      .allsort__layer-side.front {
        transform-origin: top center;
        transform: rotateX(90deg);
        background-color: blue !important;
        height: 12px;
        left: 0;
        position: absolute;
        top: 55px;
        width: 55px;
      }

      .allsort__layer-side.back {
        transform-origin: center left;
        transform: rotateY(-90deg);
        background-color: red !important;
        height: 55px;
        left: 55px;
        position: absolute;
        top: 0;
        width: 12px;
      }

我试图在HTML中摆弄边堆叠的顺序，效果不佳。我的设置有任何明显的问题吗？我很确定我已经尝试了transform-style: preserve-3d和backface-visibility: visible的每一个组合，但也许有一个秘密公式？