beam !

dabblet.css

/* beam ! */
html, body  {margin: 0; padding: 0;display:table ;border-spacing:0;height:100%;width:100%;
background:#333;}
body { display:table-cell;vertical-align:middle;transform-style:flat;preserve-3d;
perspective:1000px;}

#container {
width:800px;
height:640px;
border:solid ;
position:relative; 
margin:auto;padding:0;
transform-style:flat;preserve-3d;
perspective:10px;
border-radius:800px;
box-shadow:0 0 500px 200px black,inset 0 0 8px  30px #222,inset 0 0 30px 70px #555;
transform:skew(5deg,5deg) rotatey(15deg) scale(0.35);
background:#789;
}
p {font-size:10em;font-weight:bold;line-height:0em;position:absolute;;}

a {
box-shadow:0 0 5px  gold;
height:640px;color:black;
width:800px;
position:absolute;
display:inline-block;
top:0;
left:0;
vertical-align:top;bottom:0;
transform:rotateY(60deg) ;
transform-origin:left;
overflow:hidden;
background:red;
line-height:0px;
text-align:left;
z-index:-1;
border-left:ridge 2px;
border-radius:5em;
} 
a:hover {box-shadow:0 0 15px white;}
a:nth-child(2) {
transform:rotateY(-62deg);
transform-origin:right;
right:0;
left:auto;
background:blue;
text-align:right;line-height:400px;
border-right:ridge 2px;border-left:none;
}

a:nth-child(3) {
transform:rotateX(-93deg);
transform-origin:top;
background:#DD6B0E;
top:0;
right:0;
left:auto;
line-height:0;
border-top:ridge 2px;
border-left:none;

}
a:nth-child(4) {
transform:rotateX(93deg) ;
transform-origin:bottom;
right:0;
left:auto;
top:auto;
bottom:8px;
background:#333;
color:white;
font-size:2.9em;
border-bottom:ridge 2px black;
border-left:none;
}

dabblet.html

<div id="container">
	<a href="#a" title="section 1"> <p>0</p> </a>
	<a href="#b" title="section 2"> <p>0000000000000</p> </a>
	<a href="#c" title="section 3"> <p>000000000000</p> </a>
	<a href="#d" title="section 4"> <p> 00000000</p> </a>

</div>

<!-- <a href="#" title="section 1"><img src="http://lorempixum.com/800/640/nature/5" /></a>
	<a href="#" title="section 1"><img src="http://lorempixum.com/800/640/nature/4" /></a>
	<a href="#" title="section 1"><img src="http://lorempixum.com/800/640/nature/3" /></a>
	<a href="#" title="section 1"><img src="http://lorempixum.com/800/640/nature/2" /></a>
	<a href="#" title="section 1"><img src="http://lorempixum.com/800/640/nature/1" /></a>
	-->

settings.json

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