.container{
  width:400px;
  height:616px;
  position: relative;
    margin: 0 auto;
}

body
       {
 background: #61473e;

}

.card{
  text-align:center;
  position: absolute;
  width: 100%;
  height: 100%;

}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
}
.face.front{
  background:#000; 
}
.face.back {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  color: white;
  text-align: left;
  background-color: #333;
}

.container{
  perspective: 800px;
}
.card{
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.card:hover .front{
  transform: rotateY(-180deg);
}

.card:hover .back {
 transform: rotateY(0deg);
}
.face {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.face.front {
  transform: rotateY(0deg);
} 

.face.back {
  transform: rotateY(180deg); 
}