Front!
Bla bla bla lore ipsum sic tame
Front!
Back!
Front!
Back!
Front!
Back!
Front!
Back!
Front!
Back!
.flip-card{position:relative;z-index:1000;width:100px;height:100px;text-shadow:1px 1px 0 rgba(14,85,143,.8);color:#fff;cursor:pointer;float:left;font-weight:bold;margin:20px;text-align:center;text-transform:uppercase}.flip-card .card-front,.flip-card .card-back{-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-transition:-moz-transform 750ms;-o-transition:-o-transform 750ms;-webkit-transition:-webkit-transform 750ms;transition:transform 750ms;border:#0e558f;display:block;height:100px;position:absolute;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:1px 1px 2px rgba(14,85,143,.8);-webkit-box-shadow:1px 1px 2px rgba(14,85,143,.8);box-shadow:1px 1px 2px rgba(14,85,143,.8);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 0}.flip-card .card-front{-moz-transform:perspective(400) rotateY(0);-webkit-transform:perspective(400) rotateY(0);transform:perspective(400) rotateY(0);z-index:900;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#1B8CE8}.flip-card .card-back{-moz-transform:perspective(400) rotateY(-180deg);-webkit-transform:perspective(400) rotateY(-180deg);transform:perspective(400) rotateY(-180deg);-moz-box-shadow:0 0 20px rgba(19,113,189,.8) inset;-webkit-box-shadow:0 0 20px rgba(19,113,189,.8) inset;box-shadow:0 0 20px rgba(19,113,189,.8) inset;background:#1681d9}.flip-card:hover .card-front{-moz-transform:perspective(400) rotateY(180deg);-webkit-transform:perspective(400) rotateY(180deg);transform:perspective(400) rotateY(180deg)}.flip-card:hover .card-back{-moz-transform:perspective(400) rotateY(0deg);-webkit-transform:perspective(400) rotateY(0deg);transform:perspective(400) rotateY(0deg)}body{background-color:#feffff;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorstr='#FFFEFFFF',endColorstr='#FFA0D8EF');background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmVmZmZmIi8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiNkZGYxZjkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMGQ4ZWYiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=);background-size:100%;background-image:-moz-radial-gradient(top,ellipse cover,#feffff 0,#ddf1f9 35%,#a0d8ef 100%);background-image:-webkit-radial-gradient(top,ellipse cover,#feffff 0,#ddf1f9 35%,#a0d8ef 100%);background-image:radial-gradient(ellipse cover at top,#feffff 0,#ddf1f9 35%,#a0d8ef 100%)}.viewport{margin:40px auto 0;width:500px}