.myflip { 
  width: 100%;
  height: 200px;
  position: relative;
  list-style-type: none;

}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
    perspective:800px;
}
.card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
    z-index:10;
}
.card .front {
  cursor: pointer;
}
.card .back {
  background: #D9EDF7;
    z-index:0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  cursor: pointer;
}
.card.flip .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
    z-index:0;
}
.card.flip .back {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
    z-index:10;
}