Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Last active September 20, 2023 08:11
Show Gist options
  • Save LeaVerou/1760283 to your computer and use it in GitHub Desktop.
Save LeaVerou/1760283 to your computer and use it in GitHub Desktop.
Move in a circle without wrapper elements
/**
* 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;
}
<div class="smile">☺</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@LeaVerou
Copy link
Author

LeaVerou commented Feb 7, 2012 via email

@heroheman
Copy link

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

@yukulele
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment