JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    
  </div>
  <div class="content">
    <p>
    Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a <b>pharetra augue</b>. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
    <a href="">Some link</a>
    
    </p>
    <p>
    <figure><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIeLhOTEqGQr6dhj8-s3MumDuNon40G0srsYOGaPgH1glxDFuLaA" /></figure>Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a <b>pharetra augue</b>. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>
    <p>
    Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a <b>pharetra augue</b>. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
    <a href="">Some link</a> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. <button>Submit</button>
   
    
    </p>
    <p>
    Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a <b>pharetra augue</b>. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
    <a href="">Some link</a>
    
    </p>
  </div>
  <div...

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  background-color:#666;
  perspective:500px;
}
.container{
  position:relative;
  height:100%;
  transform-style:preserve-3d;
  transform:translateZ(-300px);
  animation:spinsite infinite 10s linear;
  background-color:#000;
  padding:40px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
@keyframes spinsite{
  0%{ transform:translateZ(-300px) rotateY(0deg); }
  100%{ transform:translateZ(-300px) rotateY(360deg); }
}
.header{
  background-color:#99cc00;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  height:64px;
}
a{
  color:#99cc00;
}
p{
  padding:10px;
  background-color:#333;
}
.footer{
  background-color:#333333;
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
  height:64px;
}
.content{
  position:relative;
  color:#fff;
  margin-left:auto;
  margin-right:auto;
  top:64px;
  bottom:64px;
  font-size:17px;
  font-family:helvetica;
}
/*
.lightbox:before{
  background-color:inherit;
  width:100%;
  height:100%;
  position:absolute;
  transform-origin: 0% 50%;
  transform:rotateY(-90deg);
  content:"";
  left:0px;
  top:0px;
  display:block;
  filter:brightness(0.8) opacity(0.8);
}
.lightbox:after{
  background-color:inherit;
  width:100%;
  height:100%;
  position:absolute;
  transform-origin: 100% 50%;
  transform:rotateY(90deg);
  content:"";
  right:0px;
  top:0px;
  display:block;
  filter:brightness(0.8) opacity(0.8);
}
*/
.lightboxh:before{
  background-color:inherit;
  width:100%;
  height:300%;
  position:absolute;
  transform-origin: 50% 0%;
  transform:rotateX(-90deg);
  content:"";
  left:0px;
  top:0px;
  display:block;
  filter:brightness(0.8) opacity(0.8);
}
.lightboxh:after{
  background-color:inherit;
  width:100%;
  height:100%;
  position:absolute;
  transform-origin: 50% 100%;
  transform:rotateX(90deg);
  content:"";
  right:0px;
  top:0px;
  display:block;
  filter:brightness(0.8) opacity(0.8);
}
button{
  background-color:#333;
}
.figure{
 ...

JavaScript

var vrify = {

	parent: $('.container'),
  
  levels: 0,
  degree: 20,
  
  z: 20,
  
  fixedZ: 100,
  
  build: function(){
  
  	var cached_this = this;
    
    cached_this.parent.addClass('lightbox');
    
    cached_this.parent.find('*').each(function(){
    
    	if($(this).css('display') == 'inline'){
      
      	$(this).css('display','inline-block');
      
      }
    
    });
  
  	cached_this.parent.children().each(function(){
    	
      var t = $(this);
      
      t.addClass('lightboxh');
    
      if($(this).css('position') == 'fixed'){
      
      	t.css('transform','translateZ(' + cached_this.fixedZ + 'px)');
      
      } else {
      
      	t.css('transform','translateZ(' + cached_this.z + 'px)');
      
      }
      
    	t.css('transform-style','preserve-3d');
      
    	cached_this.levels++;
      
      t.children().each(function(){
				
        var tt = $(this);
        
        tt.addClass('lightboxh');
        
        tt.css('transform-style','preserve-3d');
        tt.css('transform','translateZ(' + parseInt((cached_this.z+cached_this.degree)*1) + 'px)');

        cached_this.levels++;
        
        tt.children().each(function(){
					
          console.log("FOUND ONE");
          $(this).css('transform-style','preserve-3d');
          $(this).css('transform','translateZ(' + parseInt((cached_this.z+cached_this.degree)*1) + 'px)');

          cached_this.levels++;

        });

      });
    
    });
  
  }

}

vrify.build();