Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform

dabblet.css

/**
 * Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform
 * transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
 */
html {padding: 2em}

.step {
	width: 10em;
	height: 10em;
	padding: 0.2em;
	position: absolute;
	background: #eee;
	border: 1px solid grey;
	font-family: Arial;
}

.step1 {
	transform: translate(80px, 80px);
	background: rgba(248,156,,0.4);
}

.step2 {
	transform: translate(80px, 80px) scale(1.5, 1.5);
	background: rgba(0,0,0,0.4);
}

.step3 {
	transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
	background: rgba(0,0,0,0.4);
}

dabblet.html

<div class="step"></div>
<div class="step step1">translate</div>
<div class="step step2">scale</div>
<div class="step step3">rotate</div>

dabblet.js

// alert('Hello world!');

settings.json

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