Untitled

dabblet.css

.container {
	transform: rotate(0deg);
	width: 600px;
	height: 600px;
}

.container:hover {
	-webkit-animation: rotator 2s;
}

.circle {
	width: 300px;
	height: 300px;
	background: #000;
	border-radius: 150px;
}

.secondary {
	margin: -200px 40px;
	background: #fff;
}


.photo {
	width: 300px;
	height:300px;
	border: 1px solid #000;
	margin-top: -600px;
	margin-left: 0px;
	border-radius: 200px;
	background: #09f;
}


@-webkit-keyframes rotator {
	0% {
		transform: rotate(0deg);
	}
	50% {		transform: rotate(90deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

dabblet.html

<div class="container">
	<div class="circle"></div>
	<div class="circle secondary"></div>
</div>
<div class="photo"></div>

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}