edu.css

.card
{
    margin-left: 25vw;
    margin-bottom:25vh;
    width:50%;
    height:50vh;
    border:1px solid black;
    /* position:absolute; */
    /* left:50%;
    top:50%;
    margin:-150px; */
    perspective:100vw;
}
.content
{
    width:100%;
    height:100%;
    /* position:absolute; */
    transition: transform 1s;
    transform-style: preserve-3d;
}
.card:hover .content
{
    transform: rotateY(180deg);
}
.front,.back
{
    width:100%;
    height:100%;
    position:absolute;
    background:linear-gradient(gray,white,rgb(88, 84, 84));
    /* ,#0ff,#fff,#f0f,#0ff */
    /* color:tomato; */
    backface-visibility: hidden;
    /* line-height: 50vh; */
    text-align:center;
    
}
.back
 {
    /*background: tomato;
    color:#fff; */
    transform:rotateY(180deg);
    backface-visibility: hidden;
}