body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.card {
width: 300px;
height: 200px;
perspective: 1000px;
cursor: pointer;
}
.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-front {
background-color: #ffcc00;
}
.card-back {
background-color: #ff6600;
transform: rotateY(180deg);
}
document.getElementById("card").addEventListener("click", function() {
this.style.transform = this.style.transform === "rotateY(180deg)" ? "rotateY(0)" : "rotateY(180deg)";
});
top of page
bottom of page
