.flashcard {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    margin: 50px auto;
}
 
.flashcard > div {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    transition: transform 0.6s;
    display: flex;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}
 
.front {
    background: #f0f0f0;
}
 
.back {
    background: #e0e0e0;
    transform: rotateY(180deg);
}
 
.flashcard:hover .front {
    transform: rotateY(180deg);
}
 
.flashcard:hover .back {
    transform: rotateY(0deg);
}