Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to keep MSIE 11 on board, steering clear of transform-type: preserve-3d is paramount since Microsoft does not support it. Consequently, every parent and child transform must be applied to each face of the cube.
While tackling a cube poses no significant challenge when aligning its sides by rotating them correctly, things take a baffling turn when dealing with a cuboid where the ends seem to be slightly misaligned. What causes this discrepancy, and how can it be rectified?
The issue is visually depicted in the following screenshot:
The corresponding HTML goes like this:
<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>
Meanwhile, the CSS for these elements stands as follows:
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;
}
To see this code in action, check out the JSFiddle link provided here: https://jsfiddle.net/6h7mmtgn/
Your insights and suggestions are greatly appreciated.