JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<section class="container">
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure class="back"><h1>PIXIDEA 2</h1></figure>
    </div>
    <div class=layer>
      <figure class="front"><h1>PIXIDEA1</h1></figure>
      <figure...

CSS

@import url(http://fonts.googleapis.com/css?family=Concert+One);

body {
  background: rgba(10, 10, 10, 0.13);
  overflow:hidden;
  text-align:center;
    color: #444;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
}

.container {
      width: 480px;
      height: 320px;
      margin: 20px auto;
      position: relative;
      border: 1px solid red;
 
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: center center;
         -moz-transform-origin: center center;
           -ms-transform-origin: center center;
              transform-origin: center center;
    }
.layer:hover{
   
}
.layer{
  position:absolute;
  top:0;
  width: 100%;
  height: 100%;
  border: 1px solid #444;
border-radius: 5px;
background: #fafafa;
box-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
    
}

.layer:nth-child(even){
 left:-120%;   
}
.layer:nth-child(odd){ 
right:-120%;
}
.layer figure{
  display:block;
  width: 100%;
  height: 100%;
  text-align:center;
  line-height:1.5;
  font:900 4em 'Concert One', sans-serif;
  text-transform:uppercase;
  position:absolute;
  top:0;
  left:0;
  color:#0a0a0a;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -ms-backface-visibility: hidden;
              backface-visibility: hidden;
}
.layer .back {
      background: blue;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -ms-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

.layer:first-child{
    background-color:#ccc;   
}
.layer:last-child{
    background-color:red;
}

@media all and (-webkit-transform-3d) {
 
}

@media screen and (max-width: 640px) {

}
@media only screen and...

JavaScript

$( ".layer" ).each(function( index ) {
    $(this).css({
                    '-webkit-transform': 'translate3d(0,0,-'+index*40+'px)',
                    '-moz-transform': 'translate3d(0,0,-'+index*40+'px)',
                    '-ms-transform': 'translate3d(0,0,-'+index*40+'px)',
                    'transform': 'translate3d(0,0,-'+index*40+'px)'
                });
});


var img = $('.container');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotateY('+degree+'deg)');
        img.css('-webkit-transform', 'rotateY('+degree+'deg)');
        img.css('-o-transform', 'rotateY('+degree+'deg)');
        img.css('-ms-transform', 'rotateY('+degree+'deg)');
    }
    $(document).mousemove(mouse);
}