<div id="mainWrap">
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
</div>
<div style="clear:both;"></div>

<div id="mainWrap" style="margin-top:10px;">
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
</div>

body
{
  background:#444;
}
.cardCont
{
  width:250px;
  height:400px;
  float:left;
  margin-right:10px;
  position:relative;
  /*border:solid 2px #fff;*/
}
.cardFront, .cardBack
{
  position:absolute;
  width:250px;
  height:400px;
  background:url('https://s.cdpn.io/33073/lorempixel.jpg');
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}
.cardBack
{
  background:url('https://s.cdpn.io/33073/lorempixe1l.jpg');
}

.playcardFront
{
  background:url("https://images.unsplash.com/photo-1670396396435-7b328aee2732?q=50&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.playcardBack
{  background:url("https://images.unsplash.com/photo-1507041957456-9c397ce39c97?q=50&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

console.clear();

gsap.utils.toArray(".cardCont").forEach(function(card) {
  gsap.set(card, {
    transformStyle: "preserve-3d",
    transformPerspective: 1000
  });
  const q = gsap.utils.selector(card);
  const front = q(".cardFront");
  const back = q(".cardBack");
  
  gsap.set(back, { rotationY:-180 });
  
  const tl = gsap.timeline({ paused: true })
    .to(front, { duration: 1, rotationY: 180 })
		.to(back, { duration: 1, rotationY: 0 }, 0)
		.to(card, { z: 50 }, 0)
		.to(card, { z: 0 }, 0.5);
  card.addEventListener("mouseenter", function() {
    tl.play();
  });
  card.addEventListener("mouseleave", function() {
    tl.reverse();
  });
});