html - CSS变换3D立方体偏移

我正在尝试使用CSS 3D变换来显示将包含横截面的立方体和长方体。
我的目标是Chrome，Firefox和MSIE11。我发现要保持MSIE 11的兼容性，我需要避免使用transform-type：reserve-3d，因为Microsoft不支持，因此我需要应用所有父级和子级转换为每个立方体面。

对于立方体，我可以旋转每侧以正确地对齐它们，但是对于长方体，则两端是偏移的-为什么这样做，以及如何固定呢？

此屏幕快照说明了问题：



这是HTML：

<div class="test test1">
    <h1>1.</h1>
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>

<div class="test test2">
    <h1>2.</h1>
    <div class="cube cuboid">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>

这是CSS：

    div.test {
        height: 200px;
    }

    /* basic cube */
    .cube {
        font-size: 4em;
        width: 500px;
        margin: auto;
        /* MSIE11 does not support preserve-3d.
          for MSIE all transforms must be applied to all elements */
    }

    .side {
        position: absolute;
        width: 100px;
        height: 100px;
        background: rgba(255,0,0,0.3);
        border: 1px solid black;
        color: white;
        text-align: center;
        line-height: 100px;
    }
    /* for MSIE11 compatibility, avoid using a transform on the parent, combine all parent+child transforms, transform-style: preserve3d is not supported */
    .front {
        transform: rotateX(-40deg) rotateY(32deg) translateZ(50px);
        z-index: 1000;
    }
    .top {
        transform: rotateX(-40deg) rotateY(32deg) rotateX(90deg) translateZ(50px);
        z-index: 1000;
    }
    .right {
        transform: rotateX(-40deg) rotateY(32deg) rotateY(90deg) translateZ(50px);
    }
    .left {
        transform: rotateX(-40deg) rotateY(32deg) rotateY(-90deg) translateZ(50px);
        z-index: 1000;
    }
    .bottom {
        transform: rotateX(-40deg) rotateY(32deg) rotateX(-90deg) translateZ(50px);
    }
    .back {
        transform: rotateX(-40deg) rotateY(-148deg) translateZ(50px);
    }

    /* cuboid - 100 x 100 x 200 */
    .cuboid .front {
        width: 200px;
    }
    .cuboid .top {
        width: 200px;
    }
    .cuboid .right {
        transform: rotateX(-40deg) rotateY(122deg) translateZ(150px);
    }
    .cuboid .back {
        width: 200px;
    }
    .cuboid .bottom {
        width: 200px;
    }

这是此代码的JSFiddle：https://jsfiddle.net/6h7mmtgn/

感谢您的任何建议。

最佳答案

.cuboid .left,
.cuboid .right {
     margin-top: 16px;
     margin-left: 7px;
}

示范如下：

div.test {
    xwidth: 100%;
    xperspective: 750px;
    height: 200px;
}
/* basic cube */
 .cube {
    font-size: 4em;
    width: 500px;
    margin: auto;
    /* MSIE11 does not support preserve-3d.
			  for MSIE all transforms must be applied to all elements */
}
.side {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 0, 0, 0.3);
    border: 1px solid black;
    color: white;
    text-align: center;
    line-height: 100px;
}
/* for MSIE11 compatibility, avoid using a transform on the parent, combine all parent+child transforms, transform-style: preserve3d is not supported */
 .front {
    transform: rotateX(-40deg) rotateY(32deg) translateZ(50px);
    z-index: 1000;
}
.top {
    transform: rotateX(-40deg) rotateY(32deg) rotateX(90deg) translateZ(50px);
    z-index: 1000;
}
.right {
    transform: rotateX(-40deg) rotateY(32deg) rotateY(90deg) translateZ(50px);
}
.left {
    transform: rotateX(-40deg) rotateY(32deg) rotateY(-90deg) translateZ(50px);
    z-index: 1000;
}
.bottom {
    transform: rotateX(-40deg) rotateY(32deg) rotateX(-90deg) translateZ(50px);
}
.back {
    transform: rotateX(-40deg) rotateY(-148deg) translateZ(50px);
}
/* cuboid - 100 x 100 x 200 */
 .cuboid .front {
    width: 200px;
}
.cuboid .top {
    width: 200px;
}
.cuboid .right {
    transform: rotateX(-40deg) rotateY(122deg) translateZ(150px);
}
.cuboid .back {
    width: 200px;
}
.cuboid .bottom {
    width: 200px;
}
.cuboid .left, .cuboid .right {
    margin-top: 16px;
    margin-left: 7px;
}

<div class="test test1">
    <h1>1.</h1>
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>
<div class="test test2">
    <h1>2.</h1>
    <div class="cube cuboid">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</div>

View on JSFiddle