
.card, .carda {
  width: 200px;
  height: 300px;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  font-size: .8em;
  perspective: 600px;
}
.card:hover,
.carda {
  transition: 1s ease;
}
.card .front,
.carda .front {

float: none;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: inherit;
height: inherit;
  border-radius: 10px;
  border: 10px solid #fff;
text-align: center;
box-shadow: 0 1px 5px rgba(0,0,0,0.9);
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .4s ease-in-out;
background:
linear-gradient(-45deg, $splashcolor 25%, transparent 25%, transparent 75%, $splashcolor 75%, $splashcolor) 0 0,
linear-gradient(-45deg, $splashcolor 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em,
linear-gradient(45deg, $splashcolor 17%, transparent 17%, transparent 25%, $splashcolor 25%, $splashcolor 36%, transparent 36%, transparent 64%, $splashcolor 64%, $splashcolor 75%, transparent 75%, transparent 83%, $splashcolor 83%) 1em 1em;
background-color: white;
background-size: 2em 2em;
background-position: -1em -1em;

}
.card:hover .front {
  z-index: 900;
  transform: rotateY(180deg);
  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.card .back,
.carda .back {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: inherit;
  height: inherit;
  background: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
  border-radius: 10px;
  border: 10px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.9);
}
.card:hover .back {
  z-index: 1000;
  transform: rotateY(0);
}
.card:first-of-type,
.carda:first-of-type {
  transform: rotate(-5deg);
}
.card:nth-of-type(2):hover,
.carda.flipped:nth-of-type(2){
  transform: rotate(0) translatex(120px);
}
.card:last-of-type,
.carda:last-of-type {
  transform: rotate(5deg);
}
.card:first-of-type:hover{
  transform: rotate(10deg) translatey(180px);
}
.carda.flipped:first-of-type{
  transform: rotate(-5deg) translate(240px, 25px);
}

.carda.flipped .front,
.carda.unflipped .back {
  animation: flipme 1s linear forwards;
}
.carda.unflipped .front,
.carda.flipped .back {
  animation: unflipme 1s linear both;
}

@keyframes flipme {
  0% {transform: rotatey(0deg);}
  100% {transform: rotateY(-180deg);}
}
@keyframes unflipme {
  0% {transform: rotatey(180deg);}
  100% {transform: rotateY(0deg);}
}




.card .back, 
.carda .back {
  color: red; 
  font-size: 50px; 
  line-height: 300px; 
  text-align:center;
}
.card .back:after,
.carda .back:after  {
  content: 'A'; 
  position:absolute; 
  top: 10px; 
  left: 10px; 
  line-height:20px;
}
.card .back:before,
.carda .back:before {
  content: 'A'; 
  position:absolute; 
  bottom: 10px; 
  right: 10px; 
  line-height:20px;
}

@keyframes showme {
  0% {background-color:blue; transform: rotate(0deg) translate(200px, 0)}
  50% {background-color:green;transform: rotate(22deg) translate(350px, -150px)}
  100% {background-color: yellow; transform: rotate(45deg) translate(500px, -540px)}
}