JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<section class="viewport">
    <section class="Timeline3D">
    </section>
 </section>

CSS

.viewport {
   position:fixed;
   height: 600px;
   width: 400px;
   top:50%;
   left:50%;
   margin:-300px 0 0 -200px;
  }
.viewport .Timeline3D{
   position:relative;
   top:0;
   left:0;
   width:100%;
   height:100%;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-perspective: 300px;
   -moz-perspective: 300px;
    perspective: 300px;
   -webkit-perspective-origin:50% 50%;
   -moz-perspective-origin:50% 50%;
   perspective-origin:50% 50%;
  }
.viewport .layer3d {
   position:absolute;
   padding: 20px;
   width: 320px;
   height: 200px;
   left:50%;
   top:50%;
   vertical-align: middle;
   text-align: center;
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   backface-visibility:hidden;
   -webkit-backface-visibility:hidden; /* Chrome and Safari */
   -moz-backface-visibility:hidden; /* Firefox */
   -ms-backface-visibility:hidden; /* Internet Explorer */
 }
.viewport .layer3d:nth-child(even){
    background:rgb(2, 114, 252);
    margin: -120px 0 0 -320px;
}
.viewport .layer3d:nth-child(odd){
    background:#444;
    margin: -120px 0 0 -20px;
    box-shadow: 0 0 4px #333;
}

JavaScript

var layer3d = '<article class="layer3d">layer 1</article>',
     totalItems ="100",
     layersDistance ="200";
for(var i=0; i<totalItems;i++){
      $(".Timeline3D").append(layer3d);
    }
   var array =[];
for(var perspective =0; perspective <totalItems; perspective++){
      array.push(perspective*-layersDistance);
}
       var layersArray = array,
           layers = $(".viewport .layer3d"),
           layersLength = layers.length,
           lastArrayItem = array[array.length-1],
           extraPerspective = "-600",
           newHeight = parseInt(lastArrayItem, 10) + parseInt(extraPerspective, 10);
    $("body").css({"height":newHeight*-1+"px"});
    layers.each( function(i){
        layers[i].style.webkitTransform = "perspective(2500) matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0.9, 0, 0, 0,"+layersArray[i]+",2)";
        layers[i].style.MozTransform = "perspective(2500) matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0.9, 0, 0, 0,"+layersArray[i]+",2)";
        layers[i].style.transform = "perspective(2500) matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0.9, 0, 0, 0,"+layersArray[i]+",2)";
    });
    var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
    function scrollDelta() {
       var   delta = (document.body.scrollTop || document.documentElement.scrollTop) - scrollPosition;
      scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
      return delta;
    }
    function camera() {
      var delta = scrollDelta();
      for (i=0;i<layersLength;i++) {
        layersArray[i] += parseInt(delta); 
        layers[i].style.webkitTransform = "perspective(2500) matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0.9, 0, 0, 0,"+layersArray[i]+",2)";
        layers[i].style.MozTransform = "perspective(2500) matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0.9, 0, 0, 0,"+layersArray[i]+",2)";
        layers[i].style.transform = "perspective(2500) matrix3d(0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0.9, 0, 0,...