JSFiddle - React, Tailwind, and code Playground

by illya_v

HTML

<div id="wrapper">
</div>
  <div id="card" class="card fanimate" >
    <div class="cover cover-top" >
      <div id="out" class="cover-sheet out">
        <div id="open" class="open-btn" title="Открыть" ></div>
        <header><div>Все на ёлку!</div></header>
        <div class="snowman">
          <div class="snowman-hand left"></div>
          <div class="snowman-hand right"></div>
          <div class="snowman-body top">
            <div class="hat"><div class="ponpon"></div></div>
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="nose"></div>
            <div class="mouth"></div>
          </div>
          <div class="scarf"><div class="ending"></div></div>
          <div class="snowman-body middle"></div>
          <div class="snowman-body bottom"></div>
        </div>
        <div class="snowman-body snowdrift-0">
        </div>
      </div>
      <div class="cover-sheet in">
        <div class="header"><div>С Новым Годом!</div></div>
        <div class="snowdrift snowdrift-1"></div>
        <div class="snowdrift snowdrift-2"></div>
        <div class="snowdrift snowdrift-3"></div>
      </div>
    </div>
    <div class="cover cover-bottom" >
      <div class="figure tree">
        <div class="ball ball-1"></div>
        <div class="ball ball-2"></div>
        <div class="ball ball-3"></div>
        <div class="ball ball-4"></div>
        <div class="ball ball-5"></div>
        <div class="ball ball-6"></div>
        <div class="ball ball-7"></div>
        <div class="ball ball-8"></div>
        <div class="ball ball-9"></div>
        <div class="ball ball-10"></div>
        <div class="ball ball-11"></div>
        <div class="tier tier-1"></div>
        <div class="tier tier-2"></div>
        <div class="tier tier-3"></div>
        <div class="tier tier-4"></div>
        <div class="stem"></div>
      </div>

      <div class="figure ded">
        <div class="ded-head">
          <div...

CSS

body{ 
  padding: 0;
  margin: 0;
}
#wrapper{
  position: absolute;
  background: #35bb5d; 
  width: 100%;
  height: 100%;
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 600px;
  margin: -300px 0 0 -200px;
                    
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;

   -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
       -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
           transform-origin: 50% 50%;

   -webkit-transform: perspective(3000px);
      -moz-transform: perspective(3000px);
       -ms-transform: perspective(3000px);
        -o-transform: perspective(3000px);
           transform: perspective(3000px);

  -webkit-transition: all 1.1s cubic-bezier(.49,-0.18,.31,1);
     -moz-transition: all 1.1s cubic-bezier(.49,-0.18,.31,1);
      -ms-transition: all 1.1s cubic-bezier(.49,-0.18,.31,1);
       -o-transition: all 1.1s cubic-bezier(.49,-0.18,.31,1);
          transition: all 1.1s cubic-bezier(.49,-0.18,.31,1);
}

.card.animate {
  -webkit-transform: perspective(3000px) rotateX(75deg) rotate(90deg) translateX(420px);
     -moz-transform: perspective(3000px) rotateX(75deg) rotate(90deg) translateX(420px);
      -ms-transform: perspective(3000px) rotateX(75deg) rotate(90deg) translateX(420px);
       -o-transform: perspective(3000px) rotateX(75deg) rotate(90deg) translateX(420px);
          transform: perspective(3000px) rotateX(75deg) rotate(90deg) translateX(420px);
}

.card * {
  position: absolute;
}

.cover {
  top: 50%;
  right: 50%;
  width: 400px;
  height: 600px;
  margin: 0;
  margin-top: -300px;
  margin-right: -200px;
  background: white;
}
.cover-top {
  z-index: 1;

  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      ...

JavaScript

(function( window, document ){
  document.querySelector( "#open" ).addEventListener( "click", function(){
  	var card = document.querySelector( "#card" )
  	if ( !card.classList.contains('animate') ) {
      card.classList.add('animate');
      setTimeout( function(){ card.querySelector("#out").style.display = "none"; }, 400 );
  	}
  }, false );
  
  document.querySelector( "#wrapper" ).addEventListener( "click", function(){
  	var card = document.querySelector( "#card" )
  	if ( card.classList.contains('animate') ) {
      card.classList.remove('animate');
      setTimeout( function(){ card.querySelector("#out").style.display = "block"; }, 400 );
  	}
  }, false );
  
})( window, document );