JSFiddle - React, Tailwind, and code Playground

by andrewray

HTML

<html><head>
    </head><body>
<section class="container">
    <div class="hole"></div>
    <div class="flipper show-top">
      <div class="front">
          <div class="front-wrap">
              <input type="text" value="enter your email"/>
              
              <input type="button" value="submit" />
          </div>
      </div>
      <div class="back"></div>
      <div class="right"></div>
      <div class="left"></div>
        <div class="top">
            <div class="top-wrap"></div>
          </div>
        <div class="bottom">
            <div class="bottom-wrap"></div>
        </div>
    </div>
  </section>
    <button id="button">again!</button>
    <button id="batton">reset?</button>
</body>
</html>

CSS

body {
    background:url(https://www.crowdtilt.com/images/body-bg.jpg);
}
.container {
    position: relative;
    height:60px;
    width:400px;
    margin:20px;
    overflow:hidden;
    -webkit-perspective: 1200px;
}

.hole {
    width:360px;
    height:56px;
    position:absolute;
    top:0;
    left:0;
    background:#aaa;
    box-shadow:inset 1px 1px 10px #222;
    opacity:0.5;
}

.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transition:-webkit-transform 0.35s, top 0.3s;
}

.flipper div {
    display: block;
    position: absolute;
    line-height: 16px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #000;
}

.flipper .front, .flipper .back {
    width:360px;
    height:56px;
}

.flipper .top, .flipper .bottom {
    width:360px;
    height:16px;
    top:23px;
}

.front, .top, .bottom { background:#000; }
.top-wrap, .bottom-wrap, .front-wrap {
    position:absolute;
    top:0; left:0; bottom:0; right:0;
    background:url(https://www.crowdtilt.com/images/body-bg.jpg);
    opacity:0.5;
    -webkit-transition:opacity 0.3s;
    padding:10px;
}
.bottom-wrap {
    opacity:0.55;
}

.front-wrap input {
    padding:10px;
}

.flipper .front  { -webkit-transform: translateZ( 8px ); }
.flipper .back   { -webkit-transform: rotateX( -180deg ) translateZ(1px);
    -webkit-transition:box-shadow 0.3s;
    box-shadow:0 0 0 transparent;
}
.flipper .top { -webkit-transform: rotateX(   90deg ) translateZ( 28px ); }
.flipper .bottom { -webkit-transform: rotateX(  -90deg ) translateZ( 23px ); }

.show-front { -webkit-transform:translateZ(0) rotateX(0deg);
    -webkit-transition:-webkit-transform 0.5s linear, top 0.4s linear !important;
}
.show-front .front-wrap { opacity:1.0; }
.show-front .top-wrap { opacity:0.6; }

.show-front-first { -webkit-transform:translateZ(0) rotateX(0deg);
    -webkit-transition:-webkit-transform 0.15s linear, top 0.15s linear !important; top:0px...

JavaScript

$(function() {
    var $whole = $('.container');
    $whole.clone().insertAfter($whole);
    $whole.clone().insertAfter($whole);
    $whole.clone().insertAfter($whole);
    
    function flip($box) {
        $box.removeClass('show-top show-swing').addClass('show-front-first');
        
        setTimeout(function() {
            $box.removeClass('show-front-first').addClass('show-swing');
            setTimeout(function() {
              $box.removeClass('show-swing').addClass('show-front');
        }, 300);
            
        }, 200);
    };
    
    var $button = $('#button').click(function() {
        $('#batton').click();
        $('.flipper').each(function(i, item) {
            var $item = $(item);
            setTimeout(function() {
                flip($item);
            }, 100 * i);
        })
    });

    $('#batton').click(function() {
        $('.flipper').removeClass('show-front').addClass('show-top');
    });
});