The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

.map {
  color: white;
  margin: 0 auto;
  padding: 25px;
  width: 500px;
  height: 250px;
  transform: rotateX(45deg); 
  -webkit-box-shadow: rgba(0,0,0,0.5) 10px 20px 25px;
  -moz-box-shadow: rgba(0,0,0,0.5) 10px 20px 25px;
  box-shadow: rgba(0,0,0,0.5) 10px 20px 25px;
  background-color:#269;
  background-image: linear-gradient(white 1px, transparent 1px),
    linear-gradient(90deg, white 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -1px, -2px -1px, -1px -1px, -1px -1px;
    -webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}


.wrap {
	perspective: 800px;
	perspective-origin: 50% 100px;
}

.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
	transform: rotateX(-45deg) translateX(120px) translateZ(-1000px) translateY(1000px);
}


.cube div {
  position: absolute;
	width: 200px;
	height: 200px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid black;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}

@keyframes test {
	0% { transform: rotateX(-45deg) translateX(120px) translateZ(-1000px) translateY(1000px); }
	50% { transform: rotateX(-45deg) translateX(720px) translateZ(-1500px) translateY(1000px); }
	75% { transform: rotateX(-45deg) translateX(720px) translateZ(-1000px) translateY(1000px); }
	100% { transform: rotateX(-45deg) translateX(120px) translateZ(-1000px) translateY(1000px); }
}

.cube {
	animation: test 5s infinite ease-in-out;
}

dabblet.html

<div class="wrap">
	<div class="map">Hello World! I am a div.</div>
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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