LeaVerou · September 20, 2023 08:11 · kizu · Feb 7, 2012 · LeaVerou · Feb 7, 2012
diff --git a/dabblet.css b/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;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="smile">☺</div>
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"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;
	}