Red Stack

dabblet.css

/* Red Stack */

body > a,
body > a:before,
body > a:after { background:rgba(255,0,0,.6); color:white;
  display:block; padding:1ex; margin:1px;
  perspective:100vw }
/* 
these would be the boxy boxes with proper perspective 
https://desandro.github.io/3dtransforms/docs/perspective.html
*/
body > a:before { -content:'before'; background:black;
  position:absolute; top:0; left:0; right:0; bottom:0;
  transform:rotateY(90deg); transform-origin:0 0 }
body > a:after { -content:'after'; background:black;  
  position:absolute; top:0; left:0; right:0; bottom:0;  
  transform:rotateY(-90deg); transform-origin:100% 100% 
}

body { font:100 261%/1.6 Calibri;
  margin:0 }
html { background:#100 }

dabblet.html

<a> Applications </a>
<a> Middleware </a>
<a> Database </a>
<a> Operating System </a>
<a> Virtual Machine </a>
<a> Networking </a>
<a> Servers </a>
<a> Storage </a>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}