dziudek/dabblet.css

## dabblet.css
/**
 * 3D tests
 */

body {
	perspective: 1000;
}

#drawarea {
	backface-visibility: visible;
	background: rgba(0, 0, 0, 0.1);
	border: 3px solid #aaa;
	border-radius: 50%;
	height: 300px;
	left: 50%;
	position: absolute;
	transform-style: preserve-3d;
	transform: translateX(-50%) rotateX(75deg);
	width: 300px;
	z-index: 1;
}

#wall {
	backface-visibility: visible;
	background: #fead00;
	height: 100px;
	position: relative;
	transform: rotateY(90deg) rotateX(95deg);
	transform-origin: 100% 100%;
	transform-style: preserve-3d;
	width: 100px;
	z-index: 2;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="drawarea">
	<div id="wall"></div>
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* 3D tests
	*/

	body {
	perspective: 1000;
	}

	#drawarea {
	backface-visibility: visible;
	background: rgba(0, 0, 0, 0.1);
	border: 3px solid #aaa;
	border-radius: 50%;
	height: 300px;
	left: 50%;
	position: absolute;
	transform-style: preserve-3d;
	transform: translateX(-50%) rotateX(75deg);
	width: 300px;
	z-index: 1;
	}

	#wall {
	backface-visibility: visible;
	background: #fead00;
	height: 100px;
	position: relative;
	transform: rotateY(90deg) rotateX(95deg);
	transform-origin: 100% 100%;
	transform-style: preserve-3d;
	width: 100px;
	z-index: 2;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="drawarea">
	<div id="wall"></div>
	</div>