Menu
I'm having a problem with the back face-visibilty property. It works how I want it to in Safari/Chrome, but for some reason it's not working correctly in Firefox.
When the box flips, I get a mirror image of the front face.
900
That's because the default for backface-visibility is visible . Instead of it being visible, you could hide it.
The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.
The back face is visible when turned towards the user. The back face is hidden, effectively making the element invisible when turned away from the user.
This bug has been acknowledged by Mozilla.
The fix is to add transform: rotateX(0deg) to the front and back objects.
Adding backface-visiblity:hidden on the container, as suggested by @yalia, makes the back unresponsive in Chrome, hence that fix should be avoided.
Here's a fiddle with the fix.
54
Try putting 'backface-visibility:hidden' both on the object and its container. This is what worked for me with this bug
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
