JSFiddle - React, Tailwind, and code Playground

by jmorais

HTML

<div class="perspective"  onclick="toggleCard();">
      <div class="tile out out">
        <div class="content">
          <h3>
            FELIZ DIA DOS NAMORADOS 
          </h3>
        </div>
      </div>
      <div class="tile in-left">
        <div class="content" >
          <p>De: José Morais</p>
          <p>Para: o seu coração</p>
        </div>
      </div>
      <div class="tile in-right">
        <div class="content">
          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Etiam quis elit non arcu suscipit commodo vitae sit amet risus.
          Nam sem urna, condimentum nec rutrum auctor, sodales sed nisl.
          Nunc malesuada pretium libero eu hendrerit. Fusce et leo a orci metus.
          <p>
        </div>
      </div>
    </div>

CSS

body {
margin-left: 350px;   
}

.tile {
  position:absolute;
  width:350px;
  height:400px;
  left: 50%;
  margin: 0 auto;
  background: pink;
  -webkit-border-radius: 5px;

}

.out {
  z-index: 3;
}

.in-left {
  z-index: 2;
  left: -350px;
  -webkit-transform: rotateY(-180deg);
  -webkit-transform-origin: 100% 100%;    
}

.in-right {
  z-index: -1;
}


.content {
    border: 3px black double;   
    margin: 10px;
    padding: 20px;
    height: 335px;
}

.perspective {
  -webkit-perspective: 1200px;
  display: inline-block; 
}

/*****************************************
* Open
******************************************/

.openingOut {
  /* Webkit */
  -webkit-animation-name: open-card-out;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 2.75s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-direction: alternate;
}

.openingIn {
  /* Webkit */
  -webkit-animation-name: open-card-in;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 2.75s;
  -webkit-transition-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
}

.outOpen {
  -webkit-transform: rotateY(180deg);
  -webkit-transform-origin: 0 0;
}

.inOpen {
  -webkit-transform: rotateY(0deg);
  -webkit-transform-origin: 0 0;
}

/* Webkit */
@-webkit-keyframes open-card-out {
  from {
    -webkit-transform-origin: left 0%;
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform-origin: left 0%;
    -webkit-transform: rotateY(-180deg);
  }
}


@-webkit-keyframes open-card-in {
  from {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform-origin: right 0%;
    -webkit-transform: rotateY(0deg);
  }
}


/*****************************************
* Close
******************************************/

.closingOut {
  /* Webkit */
  -webkit-animation-name: close-card-in;
  -webkit-animation-timing-function: ease;
 ...

JavaScript

var open = false;
  var intransition = false;

  function openCard() {
    intrasition = true;
    $('.out').addClass('openingOut');
    $('.in-left').addClass('openingIn');
    setTimeout(function() {
        $('.out').css("z-index", "2");
        $('.in-left').css("z-index", "3");
        }, 800);
    setTimeout(function(){
        $('.out').removeClass('openingOut').addClass('outOpen');
        $('.in-left').removeClass('openingIn').addClass('inOpen');
        open = true;
        intrasition = false;
        }, 2750);
  }

function closeCard() {
  intrasition = true;
  $('.out').addClass('closingOut');
  $('.in-left').addClass('closingIn');

  setTimeout(function() {
      $('.out').css("z-index", "3");
      $('.in-left').css("z-index", "2");
      }, 800);
  setTimeout(function(){
      $('.out').removeClass('closingOut').removeClass('outOpen');
      $('.in-left').removeClass('closingIn').removeClass('inOpen');
      open = false;
      intrasition = false;
      }, 2750);

}

function toggleCard() {

  if (intransition) { return; }

  if (open) {
    closeCard();
  } else {
    openCard();     
  }
}