Css Transform 3d Cube Offsets

I am trying to use CSS 3D transforms to display cubes and cuboids which will contain cross-sections. I am targeting Chrome, Firefox and MSIE 11. I have found that to maintain MSIE

Solution 1:

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

Demonstration below:

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

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

View on JSFiddle

Solution 2:

I think its about the transform-origin. Try to set explicit origins on your sides like:

transform-origin: 51px51px;