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; }
}

 

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: