JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="wrap">
<div id="container">
    <div id="inner">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
    <div class="box box-5"></div>
    <div class="box box-6"></div>
    </div><!-- /inner -->
    </div><!-- /container -->
</div><!-- /wrap -->

CSS

html, body {
height: 100%;
}
body {  background: #ddd; margin: 0px auto; }

div.box { 
    width: 100%;
    height: 100%;
    position: absolute;
}

#wrap { 
    height: 100%;
    width: 100%;
    position: fixed;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

#container {
    -webkit-transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
}
#inner {
    -webkit-perspective: 500;
    -webkit-perspective-origin: center 500px;
    width: 100%;
    height: 540px;
    -webkit-perspective-origin-x: 50%;
    -webkit-perspective-origin-y: 500px;
}
div.box-1 {
    border: 5px solid white;    
    height: 500px;
    width: 500px;

}
div.box-2 {
    border: 5px solid black;    
    height: 500px;
    width: 500px;

}
div.box-3 {
    border: 5px solid red;    
    height: 500px;
    width: 500px;

}
div.box-4 {
    border: 5px solid white;    
    height: 500px;
    width: 500px;

}
div.box-5 {
    border: 5px solid black;    
    height: 500px;
    width: 500px;

}
div.box-6 {
    border: 5px solid red;    
    height: 500px;
    width: 500px;

}


.box-1 {
  -webkit-transform: translate3d( 0%, 0%, -1000px ) ;
}


.box-2 {
  -webkit-transform: translate3d( 0%, 0%, -2000px );
}


.box-3 {
  -webkit-transform: translate3d( 0%, 0%, -3000px );
}

.box-4 {
  -webkit-transform: translate3d( 0%, 0%, -4000px );
}

.box-5 {
  -webkit-transform: translate3d( 0%, 0%, -5000px );
}

.box-6 {
  -webkit-transform: translate3d( 0%, 0%, -6000px );
}