CSS3 Orbital Avatar

dabblet.css

/**
 * CSS3 Orbital Avatar
 */

.demo {
	position: absolute;
	top: 150px;
	right: 200px;
}

.avatar {
    width: 100px;
    height: 100px;
    background-image: url('http://www.mozilla.org/img/covehead/firefox/brand-toolkit/identity-channel-aurora.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
}

.orbit:before {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    position: relative;
    top: -28px;
    left: -28px;
    border: 3px solid #333;
    border-radius: 78px;
}

.orbit:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    top: -175px;
    left: -19px;
    background-color: black;
    border-radius: 15px;
    animation: rotation 15s linear infinite;
}

@keyframes rotation {
    0%   { transform: rotate(0deg);   transform-origin: 69px 69px; }
    100% { transform: rotate(360deg); transform-origin: 69px 69px; }
}

dabblet.html

<div class="demo avatar orbit"></div>

settings.json

{"view":"separate","seethrough":"1","prefixfree":"1","page":"css"}