Move in a circle without wrapper elements

dabblet.css

/**
 * Move in a circle without wrapper elements
 * Idea by Aryeh Gregor, simplified by Lea Verou
 */

@keyframes rot {
	from {
		transform: rotate(0deg)
		           translate(-150px)
		           rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(-150px) 
		           rotate(-360deg);
	}
}

.smile {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 200px;
	left: 50%;
	margin: -20px;
	font-size: 100px;
	animation: rot 3s infinite linear;
}

dabblet.html

<div class="smile">☺</div>

settings.json

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

Wow, you could do a lot of things using the same transformation function in a single transform and chaining! It's really a nice thing to investigate more.

Yeah I'm gonna do a blog post about the technique soon. ## Sent from my iPhone. Please excuse weird typos and/or terseness.

…

On 8 Φεβ 2012, at 0:06, Roman Komarov ***@***.*** wrote: Wow, you could do a lot of things using the same transformation function in a single transform and chaining! It's really a nice thing to investigate more. --- Reply to this email directly or view it on GitHub: https://gist.github.com/1760283

Had to try it out :)
http://jsfiddle.net/flrnz/XyGuw/

Good job !
This inspired me some experiments :
http://dabblet.com/gist/3451803