https://codepen.io/Don2Quixote/full/wXdoRe
var front = new Image(); front.src = "https://pp.userapi.com/c834303/v834303976/74ac8/iHI_OdnNwCc.jpg"; front.width = 200; front.height = 340; var deg = 180; document.querySelector("#card").appendChild(front); document.querySelector("#card").addEventListener("click", function() { document.querySelector("#card").style.transform = `rotateY(${deg}deg)`; deg += 180; }); #card { position: absolute; width: 200px; height: 340px; border: 5px solid red; left: calc(50% - 100px); top: calc(50% - 170px); perspective: 200px; transform-style: preserve-3d; transition: 3s; } #front { position: absolute; backface-visibility: hidden; width: 100%; height: 100%; } #back { position: absolute; transform: rotateY(180deg); backface-visibility: hidden; background-color: green; width: 100%; height: 100%; } <div id="card"> <div id="back"></div> <div id="front"></div> </div> When you click on the card, it turns around 180 degrees. translateY(180deg) . After a turn from the photo to the back side - for some time a mirrored image of the photo is seen. However, the backface-visibility: hidden property is written for each side of the card. What am I doing wrong?
