.container{
  width:100%;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container{
  width: 200px;
  height: 300px;
}

.card{
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
  transform-style: preserve-3d;
}
.card-container:hover .card{
  transform: rotateY(180deg);
}

.card .figure{
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: column;
}

.card .front{
  background: rgb(50,50,196);
  color: white;
  text-align: center;
}
.card .back{
  background: rgb(51,51,225);
  color: white;
  transform: rotateY(180deg);
}