Question

I have been trying to implement a CSS space-like animation composed of several rotating images and webkit transformations within a 100px tall div.

The div that I would like the CSS animation to be restricted to is called #example.

See the current coding here: http://jsfiddle.net/R6DKg/1/

#example { 
position:fixed; 
z-index:2000; 
width:100%;
}

As you can see, the CSS animation is taking up the entire page, rather than being contained within #example, even though the coding itself is within the div on the HTML side.

Any insight from an experienced CSS user would be extremely helpful. I feel as though it is a minor coding change, but I’ve been at this for hours adjusting various things in the code to no avail.

Answer 1

You might be looking for the overflow:hidden; property.

http://jsfiddle.net/R6DKg/5/