<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front"><h1>front</h1></div>
    <div class="cardFace back"><h1>back</h1></div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front"><h1>front</h1></div>
    <div class="cardFace back"><h1>back</h1></div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front"><img src="https://s.cdpn.io/16327/logo_texture.jpg"></div>
    <div class="cardFace back"><img src="https://s.cdpn.io/16327/logo_robust.jpg"></div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front"><h1>front</h1></div>
    <div class="cardFace back"><h1>back</h1></div>
  </div>
</div>

<div class="cardWrapper">
  <div class="card">
    <div class="cardFace front"><h1>front</h1></div>
    <div class="cardFace back"><div class="moreInfo">This is just an example of how you can customize the content of any card face.</div></div>
  </div>
</div>

body {
  background-color: black;
  margin:20px;
  font-family:Arial, sans-serif;
}

.cardWrapper{
  width:200px;
  height:200px;
  position:relative;
  /*background-color:#333;*/
  float:left;
  margin-right:10px;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
}

.cardFace{
  position:absolute;
  width:200px;
  height:200px;
  overflow:hidden;
}

.front{
  background-color:#333; 
}

.back{
  background-color:#333; 
}



.cardFace h1{
  margin:0px;
  font-size:30px;
  padding:10px 0px 10px 10px;
  border-bottom:solid 6px #aaa;
  border-top:solid 6px #aaa;
  background-color:black;
  color:white;
}


.cardFace.back h1{
 border-color:#91e600;
}

.moreInfo{
  padding:10px;
  color:white;
  line-height:24px;
  
}

//IE doesn't transform-style:preserve-3d.
// for IE try https://codepen.io/rhernando/pen/vjGxH


//using gsap.set() takes care of all vendor-prefixes
gsap.set(".cardWrapper", {perspective:800});
gsap.set(".card", {transformStyle:"preserve-3d"});
gsap.set(".back", {rotationY:-180});
gsap.set([".back", ".front"], {backfaceVisibility:"hidden"});

$(".cardWrapper").hover(
  function() {
    gsap.to($(this).find(".card"), {duration: 1.2, rotationY:180, ease:Back.easeOut});
  },
  function() {
    gsap.to($(this).find(".card"), {duration: 1.2, rotationY:0, ease:Back.easeOut});  
  }
);

//a nice little intro;)
gsap.to($(".card"), {duration: 1, rotationY:-180, repeat:1, yoyo:true, stagger: 0.1});

/* learn more about GSAP JS:
https://www.greensock.com/gsap/ */