Hi,
This property is working fine. But it seems the logic is incorrect. At the beginning, you probably want to show the front image, but not the back image. So please configure the back image to rotate for -180 degrees. It is also needed to set both of their
backface-visibility to hidden, so they won’t be displayed when transformed to the background:
.face.front {
background-image: url(‘your front image’);
backface-visibility: hidden;
}
.face.back {
transform: perspective(500px) rotateY(-180deg);
background-image: url(‘your back image’);
backface-visibility: hidden;
}
When you want to rotate the card, do not rotate the whole card. Instead, please switch the front and back images’ rotateY:
var front = document.getElementsByClassName("face")[0];
front.style.transform = "perspective(500px) rotateY(-180deg)";
var back = document.getElementsByClassName("face")[1];
back.style.transform = "perspective(500px) rotateY(0deg)";
Best Regards,
Ming Xu.
Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact
msdnmg@microsoft.com.
Microsoft One Code Framework