Splay circles from top along a circular path

dabblet.css

/**
 * Splay circles from top along a circular path
 * http://stackoverflow.com/questions/18735723/spherical-motion-around-object-using-javascript
 */

@keyframes rotate {
	0% {
		top: -30px;
		left: -30px;
		transform: rotate(0deg) translateY(-150px) rotate(0deg);
	}
	70% {
		top: -30px;
		left: -30px;
		transform: rotate(0deg) translateY(-150px) rotate(0deg);
	}
	100% {
		top: -30px;
		left: -30px;
	}
}

#centre {
	position: fixed;
	left: 50%;
	top: 50%;
	translate: rotateZ(0.1deg);
}

.circle {
	border-radius: 50%;
	position: absolute;
}

.middle {
	background: #f06;
	height: 200px;
	width: 200px;
	left: -100px;
	top: -100px;
}

.outer {
	animation: rotate 2s ease-out 1;
	background: #c00;
	background: linear-gradient(0deg, orange, red);
	height: 60px;
	width: 60px;
	left: -30px;
	top: -30px;
}

.at-7-oclock {
	transform: rotate(-120deg) translateY(-150px) rotate(120deg);
}

.at-10-oclock {
	transform: rotate(-60deg) translateY(-150px) rotate(60deg);
}

.at-12-oclock {
	transform: rotate(0deg) translateY(-150px) rotate(0deg);
}

.at-2-oclock {
	transform: rotate(60deg) translateY(-150px) rotate(-60deg);
}

.at-4-oclock {
	transform: rotate(120deg) translateY(-150px) rotate(-120deg);
}

dabblet.html

<div id="centre">
	<div class="middle circle"></div>
	<div class="outer circle at-7-oclock"></div>
	<div class="outer circle at-10-oclock"></div>
	<div class="outer circle at-12-oclock"></div>
	<div class="outer circle at-2-oclock"></div>
	<div class="outer circle at-4-oclock"></div>
	<div class="outer circle at-10-oclock"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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