CSS 3D Transformation leaves Gaps - css

Question

I am trying to make a simple cube in CSS using a before and after pseudo selector.
This however leaves a slight gap between the top of the cube and the sides where you can see the magenta background through the cube.
body{background:magenta;perspective: 300000;}
div{
width:100px;
height:100px;
background:yellow;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}
/* Right */
div:after {
background: #c5c500;
transform: rotateX(-90deg);
transform-origin: 100% 0%;
top: 100%;
width: 100%;
height: 100px;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
/* Left */
div:before {
background: #f3f370;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: 0 100%;
width: 100px;
height: 100%;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
You can see this in action in this fiddle http://jsfiddle.net/04ggen30/
How can I get rid of this gap so that the background is not visible through the cube?

Answer 1

It aren't really gaps.
In the border, there are pixels where the element only covers a fraction of the pixel. The antialiasing blends the color of the element with the color of the background. Repeat this for the other face of the cube, covering also part of the pixel, and there is still a small contribution of the background to the result.
You can solve it if you set 3 divs in the HTML, one for each face.
Now, you can use pseudo elements, moved 1px inside the cube, to make it more opaque
body{background:magenta;perspective: 300000;}
div{
width:100px;
height:100px;
background:yellow;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}
.right {
background: #c5c500;
transform: rotateX(-90deg);
transform-origin: 100% 0%;
top: 100%;
width: 100%;
height: 100px;
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
.left {
background: #f3f370;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: 0 100%;
width: 100px;
height: 100%;
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
.right::after, .left:after {
content: '';
top: 0px;
width: inherit;
height: inherit;
position: absolute;
background: inherit;
transform: translateZ(-1px);
}
<div>
<div class="right"></div>
<div class="left"></div>
</div>
Another posibility using shadows and a single element
body{background:magenta;perspective: 300000;}
div{
width:100px;
height:100px;
background:yellow;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}
/* Right */
div:after {
background: #c5c500;
transform: rotateX(-90deg);
transform-origin: 100% 0%;
top: 100%;
width: 100%;
height: 100px;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
box-shadow: 0px -1px 0px 0px #c5c500;
}
/* Left */
div:before {
background: #f3f370;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: 0 100%;
width: 100px;
height: 100%;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
box-shadow: 1px 1px 0px 0px #f3f370;
}
<div></div>

Answer 2

I just changed the width: 101px; to both before and after elements. You can see this fiddle http://jsfiddle.net/04ggen30/2/. Or you can change the transform property with transform: translateZ(-99px) rotateY(-90deg); just decreased translateZ from -100px to 99px.