preserve3d for a fake box

dabblet.css

/*  preserve3d for a fake box */
html {
display:table;
width:100%;height:100%;
background: #f06;
background: linear-gradient(45deg, yellow, #f06);min-height: 100%;
}
body {
display:table-cell;
vertical-align:middle;
perspective: 100px;
transform-style: preserve-3d;
}
div {
height:50px;
line-height:50px;
text-align:center;
color:white;
font-size:1.5em;
font-weight:bold;
width:200px;
background:#aaa;
margin:auto;
position:relative;
box-shadow: 0 0 1px, inset 0 0 45px white;
text-shadow:-1px -1px black, 1px 1px gray;
border-radius:3px;
}
div:before, div:after {
content:'';
background:#999;
position:absolute;
z-index:1;
top:0px;
left:0;
bottom:0px;
width:12px;
z-index:-1;
transform-origin: 0% 0%;
transform: rotateY(150deg) skewy(-30deg);
box-shadow: 0 0 1px, 0 0 15px -3px white,  250px 0 200px 120px #84d204;
border-radius:3px;
}
div:after {
background:gray;
width:202px;
top:-6px;
bottom:50px;
left:-9px;
transform-origin:  0% 0%;
transform:  skewx(50deg);
}

dabblet.html

<div>Un div </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}