body {
background: #000;
color: #CCC
}
.flipWrapper {
-webkit-perspective: 1000;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flipWrapper .card.flipped {
-webkit-transform: rotatey(180deg);
}
.flipWrapper .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flipWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flipWrapper .card .front {
position: absolute;
z-index: 1;
background: rgb(57, 171, 62);
color: white;
cursor: pointer;
border-radius: 10px;
}
.flipWrapper .card .back {
-webkit-transform: rotatey(-180deg);
background: blue;
background: red;
color: white;
cursor: pointer;
border-radius: 10px;
}