.flip-card{
  position: relative;
  height: 250px;
  width: 250px;
  transform-style: preserve-3d;
  display: inline-block;
}

.flip-card: hover{
  transform: rotateY (180deg);
  transition: all .5s ease;
}

.front{
  backface-visibility: hidden;
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
}

.back{
  backface-visibility: hidden;
  position: absolute;
  background: black
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}