css3 rotateX creates a line

Question

Reproduction online

Why is this white line visible? It is not actually white, but just shows the background of the site, which happens to be white.

This won't take place when using a background-image instead of a color for the rotating divs.

Using this to apply the rotation:

$('.box').css('transform', 'translateZ(-'+halfHeight+'px) rotateX('+ deg +'deg)')

Answer 1

This is a problem with the graphic renderer. And, it won't be the same in all computers.

My suggestion, instead of using translateZ() use translate3d(), this will use the GPU when available and the animation will be smooth without any frame drop.

More read at MDN