mariofink/dabblet.css

## dabblet.css
/**
 * CSS3 transforms & transitions
 */
 body {
 	font-family: sans-serif;
}
.box {
	background: #bada55;
	border-radius: 1em;
	width: 15em;
	height: 7em;
	margin: 5em auto;
}
.box h1 {
	line-height: 3.5em;
	text-align: center;
}

.transition-all {
	transition: all 0.25s ease-in-out;
}
.colorchange:hover {
	background: hotpink;
	width: 20em;
	transform: rotate(360deg) scale(2);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="box transition-all colorchange">
	<h1>I’m a box!</h1>
</div>

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* CSS3 transforms & transitions
	*/
	body {
	font-family: sans-serif;
	}
	.box {
	background: #bada55;
	border-radius: 1em;
	width: 15em;
	height: 7em;
	margin: 5em auto;
	}
	.box h1 {
	line-height: 3.5em;
	text-align: center;
	}

	.transition-all {
	transition: all 0.25s ease-in-out;
	}
	.colorchange:hover {
	background: hotpink;
	width: 20em;
	transform: rotate(360deg) scale(2);
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="box transition-all colorchange">
	<h1>I’m a box!</h1>
	</div>