Polymorph

dabblet.css

div {
width: 200px;
height: 200px;
margin: auto;
overflow: hidden;
}
#e {
background-color: lightblue;
transform: rotate(-65deg);
animation: rotateCCW 10s linear infinite;
}
#e:hover { background-color: khaki}
#w {
transform: rotate(45deg);
animation: rotateCW 9s linear infinite;
}
#q {
transform: rotate(30deg);
margin-top: 80px
}

@keyframes rotateCW { 100% {transform: rotate(314deg)} }
@keyframes rotateCCW { 100% {transform: rotate(-424deg)} }

dabblet.html

<div id='q'>
	<div id='w'>
		<div id='e'></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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