IE11三维转换和透视

Question

我创建了一个3D块，我用tweenmax制作动画。我知道IE不支持transform-style：preserve-3d所以你需要将它移动到子节点，但是因为有多个块（比例子更多）它并不真正起作用，特别是在使用时js来补间他们。

我的问题是有一种方法可以使用javascript为Internet Explorer保留3d吗？

http://jsfiddle.net/ktcle/mhca1k10/2/

 .box {
  display: block;
  width: 180px;
  height: 60px;
  position: relative;
  left: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  outline: 1px solid transparent;
}

.box::before,
.box::after,
.box i,
.box i::before,
.box i::after,
.box b {
  content: '';
  display: block;
  position: absolute;
}

.box::before {
  background: red;
  width: 60px;
  height: 60px;
  -ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
  -webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
  transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, 150px);
}

.box::after {
  background: pink;
  width: 60px;
  height: 60px;
  -ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
  -webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
  transform: rotateY(90deg) rotateZ(180deg) translate3D(-30px, 0px, -30px);
}

.box i {
  background: green;
  width: 180px;
  height: 60px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -ms-transform: translate3D(0, 0, 0px);
  -webkit-transform: translate3D(0, 0, 0px);
  transform: translate3D(0, 0, 0px);
}

.box i::before {
  background: purple;
  width: 180px;
  height: 60px;
  -ms-transform: rotate(180deg) translate3D(0, 0, -60px);
  -webkit-transform: rotate(180deg) translate3D(0, 0, -60px);
  transform: rotate(180deg) translate3D(0, 0, -60px);
}

.box i::after {
  background: orange;
  width: 180px;
  height: 60px;
  -ms-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
  -webkit-transform: rotateX(90deg) translate3D(0px, -30px, -30px);
  transform: rotateX(90deg) translate3D(0px, -30px, -30px);
}

.box b {
  background: silver;
  width: 180px;
  height: 60px;
  -ms-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
  -webkit-transform: rotateX(90deg) translate3D(0px, -30px, 30px);
  transform: rotateX(90deg) translate3D(0px, -30px, 30px);
}