It's a common problem in Chrome, and the equivalent of z-index positioning in 3D, the z transform.
Try
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px); // added translateZ
}
and it will work
Question
I've been working on a project where I have to develop a web page that looks like this
http://cdpn.io/jkCqI
Though it works fine with FireFox, the only issue that I am facing is that the form controls for this webpage do not work in Google Chrome. I suspect it is an issue of
backface-visibility
or anything like that.
Can anyone please help me with this? How to correct this?
La solution
It's a common problem in Chrome, and the equivalent of z-index positioning in 3D, the z transform.
Try
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px); // added translateZ
}
and it will work