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)')
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