See the gray box on this page: http://goo.gl/fL973
When you point him, suppose he rolls over and shows the other side. It works in Chrome, but for some reason I get a lot of flickering during the animation. I tried to mess with the rules and even add a container around the box, but was not successful.
I read this question, among others: Why does the rotateY (flip) css3 animation flicker in Chrome?
The problem is that elements with backface-visibility: hidden; cannot have backgrounds. So, as a workaround, I thought I could have an element inside .front and .back and give that element a background. It did not work, it still flickered.
Other than that, I'm also not sure why it only works in Chrome / webkit. I have the necessary prefixes for everything, so it should work, right?
Any suggestions?
source share