index2backup.css

* { box-sizing: border-box; }
.card{
  position:absolute;
  width:100%;
  height:100%;
  line-height:300px;
  text-align:center;
  border:2px solid #555;
  background-color:lightblue;
  -webkit-backface-visibility: hidden;
}

.container{
  width:550px;
  height:300px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
 position:absolute;

}

.back{
/*   initially rotate back to hide it */
  transform:rotateY(180deg);
}
.flipme{
  transform:rotateY(180deg);
}
.moveme{
  transform:translateX(550px);
}

.the_learning_screen{
  width:570px;
  height:320px;
overflow: hidden;
display: block;
position: relative;
 transition: transform 0.5s;
  transform-style: preserve-3d;

}
body{
  perspective:1000px;
  font-family:sans-serif;
}