I have successfully created a "flip card" in CSS3, where the card flips downward to reveal the other side when a user hovers over it. I have ensured that the back face is not visible by setting backface-visibility to hidden. However, despite my efforts, the backside of the card still shows up.
Upon investigating some working examples available, I discovered that my code closely resembles one that functions properly. This led me to wonder why my version isn't working as expected. Following advice from this answer did not resolve the issue either, as I had already configured all instances of backface-visibility to be set to hidden.
Here's a snippet of my code:
$(".wrapper").hover(function () {
$(".flip").stop().transition({
perspective: '100px',
rotateX: '-180deg'
}).toggleClass("down");
}, function () {
$(".flip").stop().transition({
perspective: '100px',
rotateX: '0deg'
}).toggleClass("down");
});
Does anyone have an idea why this unexpected behavior is occurring?