.cards img {
border-radius: 10px;
border: 1px solid #444;
display: block;
margin: 0 auto;
}
.scene {
width: 100%;
height: 100%;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* get rid of the blue overlay that occurs on tap */
.card:focus, .card:active, .card:visited { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.card.is-flipped { transform: rotateY(180deg); }
.cardface {
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cards .cardface img {
border-radius: 10px;
border: 1px solid #f00;
box-shadow: 0px 0px 20px 5px #f00;
moz-box-shadow: 0 0 20px 5px #f00;
-webkit-box-shadow: 0 0 20px 5px #f00;
}
.front { transform: rotateY(0deg); }
/* position must be abs to keep grid from collapsing, and only spec top and left or a scroll bar flickers */
.back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}