Untitled

dabblet.css

@-webkit-keyframes panelShakeAnimation {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    12.5% {
        -webkit-transform: translateX(-6px) rotateY(-5deg);
        -moz-transform: translateX(-6px) rotateY(-5deg);
        -ms-transform: translateX(-6px) rotateY(-5deg);
        -o-transform: translateX(-6px) rotateY(-5deg);
        transform: translateX(-6px) rotateY(-5deg);
    }

    37.5% {
        -webkit-transform: translateX(5px) rotateY(4deg);
        -moz-transform: translateX(5px) rotateY(4deg);
        -ms-transform: translateX(5px) rotateY(4deg);
        -o-transform: translateX(5px) rotateY(4deg);
        transform: translateX(5px) rotateY(4deg);
    }

    62.5% {
        -webkit-transform: translateX(-3px) rotateY(-2deg);
        -moz-transform: translateX(-3px) rotateY(-2deg);
        -ms-transform: translateX(-3px) rotateY(-2deg);
        -o-transform: translateX(-3px) rotateY(-2deg);
        transform: translateX(-3px) rotateY(-2deg);
    }

    87.5% {
        -webkit-transform: translateX(2px) rotateY(1deg);
        -moz-transform: translateX(2px) rotateY(1deg);
        -ms-transform: translateX(2px) rotateY(1deg);
        -o-transform: translateX(2px) rotateY(1deg);
        transform: translateX(2px) rotateY(1deg);
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    };
}

.panelView {
	background-color: blue;
	padding: 0.5em;
	margin: 2em;
	border-radius: 6px;
	width: 300px;
	-webkit-transform: translateY(0px) scale(1);
	position: absolute;
}

input[type=checkbox] {
	transform: scale(2);
}

.overlay {
	-webkit-perspective: 800;
	-webkit-perspective-origin: bottom left;
}

.floor {
	position: absolute;
	left: 300px;
	
	background-color: orange;
	height: 300px;
	width: 300px;
	
	-webkit-transform: rotateX(-90deg) translateZ(150px);
}

.wall {
	position: absolute;
	left: 300px;
	background-color: yellow;
	height: 300px;
	width: 300px;

	-webkit-transform: rotateY(90deg) translateZ(150px);	
}

.panelView.shake {
    -webkit-animation-duration: 800ms;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: panelShakeAnimation;
    -moz-animation-duration: 400ms;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-name: panelShakeAnimation;
}

dabblet.html

<div class="overlay">
	<div class="panelView shake">
		<h1>HEllo World</h1>
		<input type="checkbox">
	</div>
	
	<div class="floor">floor</div>
	<div class="wall">wall</div>
</div>

dabblet.js

document.getElementsByClassName('panelView')[0].onclick = function(event) {
	var lol = document.getElementsByClassName('panelView')[0];
	
	lol.className = "panelView";
	setTimeout(function() { lol.className = "panelView shake"; }, 1);
}

settings.json

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