Tarjeta movimiento 3D con efecto flip

DAR CLIC EN LOS ESPOILDERS PARA MIRAR SUS CONTENIDOS

<body>
<div class="wrap">
<div class="tarjeta-wrap">
<div class="tarjeta">
<div class="adelante card1"></div>
<div class="atras">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex velit beatae. Illum, suscipit, aspernatur!</p>
</div>
</div>
</div>
<div class="tarjeta-wrap">
<div class="tarjeta">
<div class="adelante card2"></div>
<div class="atras">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex velit beatae. Illum, suscipit, aspernatur!</p>
</div>
</div>
</div>
<div class="tarjeta-wrap">
<div class="tarjeta">
<div class="adelante card3"></div>
<div class="atras">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex velit beatae. Illum, suscipit, aspernatur!</p>
</div>
</div>
</div>
</div>
</body>

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
background: #ffffff;
}

.wrap{
width: ;
margin: 50px auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.tarjeta-wrap{
margin: 10px;
-webkit-perspective: 800;
perspective: 800;
}

.tarjeta{
width: 230px;
height: 320px;
background: #000000;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .4s ease;
transition: .4s ease;
-webkit-box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.65);
box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.65);

}

.adelante, .atras{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.adelante{
width: 100%;
}

.atras{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

padding: 15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

text-align: center;
color: #fff;
font-family: "open sans";
background: #000000;
}

.tarjeta-wrap:hover .tarjeta{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.card1{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3s8IvA7tCDZFBlsoNlK_qMvhZ3mY_UEo7jaEjbY8_HcSvpj7Zgs7Kr5cCgFHMUerOtadOyLNsMdo0cfOJe7yfyVQG5ksrBx0Lyd1CvFhFrz58YqfR7T7_dKdWiWAsLtlLmmkxAUf7i6g/s320/enkou-jk-bitch-gal-ojisan-to-namapako-seikatsu.jpg);
background-size: cover;
}

.card2{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkP-XN09kVh9GXFesBDIFv72Hx1NIl8BhlDi0keFwYSMbVjXevoN-6yXKN5wFw4nkEU8X5x3tuIrYPKMF7USRXwrYkH4krOz__tCkTzBLAeuQAt_oWatwyBcwy8wuLM_9S8W-WYEM6gjc/s320/honoo-no-haramase-oppai-ero-appli-gakuen-the-animation.jpg);
background-size: cover;
}

.card3{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOsHWcGpTWl4CSAR6DpjzgsFsfMWZw9DKPXI1dt2JSonCDmSj3mCYiuENOAepLGABdKi2FRYbM55JjPt1XbJ6I_YIE5HeOzODvx9gfJg-ZMbq6GP8LnWsUeP2XXzI1leslzZxEscIHKXw/s320/ikkyuu-nyuukon-.jpg);
background-size: cover;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex velit beatae. Illum, suscipit, aspernatur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex velit beatae. Illum, suscipit, aspernatur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex velit beatae. Illum, suscipit, aspernatur!