Pure CSS 3D effect

Use the right tool.

This is a cool effect but it can be done very simply in Javascript. The CSS for this is a mess after adding line breaks it's 500+ individual CSS selectors and gads of additional markup to track the position of the cursor.

Someone spent a lot of time on this though.

As far as I can see,

  * Create a load of vertical elements, some overlapping.
  * on each one, have a hover css rule that adjusts the background position
    of various things.

Clever, not sure why it's better than just using javascript though.

This is clearly a can and not a should thing -- to all you folks saying "...but Javascript"

This is sort of like the internet equivalent of a popup book.

View Source: http://www.romancortes.com/ficheros/meninas.html

Edit: And images: http://www.romancortes.com/ficheros/meninas_sprites.png http://www.romancortes.com/ficheros/meninas_bg1.jpg

Edit 2: http://www.romancortes.com/ficheros/meninas_bg2.jpg

Cool effect. Creating this type of 3D effect for any arbitrary image, however, is much harder since you need to manually splice out individual images and sprites, compute position coordinates, and generate the various CSS3 styles and DOM elements.

It would be cool if there was some kind of utility/library to help do this.

Also, I'm not quite familiar with all the new features of CSS3. Which CSS3-specific constructs are being used here? Looking at the source, the main things I see are just many hover styles being declared, with specific positions and dimensions.

Very similar to Start3d, http://www.start3d.com - which can apparently generate these images as well as display them for 3d glasses.

I'm pretty sure I've seen this effect elsewhere. (It was off an HN item some months back. It wasn't actually the story, it was just the header on the linked blog.)

I've seen this effect used litely on other sites before to create the perception of depth in a background, but still 2D. This is the first I've seen the technique used to create a 3D view. Very cool!!

Check out the source ( http://www.romancortes.com/ficheros/meninas.html ) and you'll see it was no simple task.

a little while back, possibly through hn, i found an artist who took 2 or 3 still photos simultaneously from different perspectives. kind of like a...dang, i'm failing at google and wikipedia today....you know the camera with two lenses that provides a 3d effect, only that requires looking at each image separately with each eye.

the artist in this case turns the two images into an animated gif.

spooky cool effect. i'm trying harder to find the link.....(eit)

still can't find it!!!

a much cooler post by the OP

http://www.romancortes.com/ficheros/starry.html