Home
> Uncategorized > Rotating worlds, using CSS only
Rotating worlds, using CSS only
Just playing with some CSS3 animation with the rotating planet mars:
http://dananos.brinkster.net/rotatingworlds/
The CSS being:
#mars {
width: 100px;
height: 100px;
background: url(images/mars.jpg);
border-radius: 50%;
background-size: 210px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
position:absolute;
left:100px;
top:250px;
}@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}
Categories: Uncategorized
Comments (0)
Trackbacks (0)
Leave a comment
Trackback