Pure CSS 3D effect

http://www.romancortes.com/blog/css-3d-meninas/

by barredo • 17 years ago

102 22 17 years ago

scorxn2• 17 years ago

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

quizbiz• 17 years ago

What about the wall on the right? How did he do that? It's as if it's an animated image, just just changing positions of an image.

frevd• 17 years ago

i think stretching and squeezing the parts near and far the mouse position does/would do the "depth" effect. too bad he didnt do it for the y-axis as well.

scorxn2• 17 years ago

Good catch. Updated to include _bg2.

axod• 17 years ago

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.

cmgarcia• 17 years ago

I couldn't read the non-English portion of the post, but I took it only for the face value; being clever. Not necessarily better.

Semiapies2• 17 years ago

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.)

mbrubeck• 17 years ago

Probably this one: http://www.cssquirrel.com/2009/12/04/the-parallax-header-how...

Semiapies2• 17 years ago

No, I'm fairly sure the one I saw used a photograph of a road.

That is certainly the same effect, though.

rimantas• 17 years ago

There were a few which worked on browser window resizing, not mouseover. I think the first one brought to my attention was http://therissingtonpodcast.co.uk/ (footer), then http://www.silverbackapp.com/ and http://dromaeo.com/

chaosmachine2• 17 years ago

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

unalone• 17 years ago

I see nothing wrong with that. More tools means more art means more fun.

chaosmachine2• 17 years ago

I agree.

diN0bot• 17 years ago

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

dkokelley• 17 years ago

Could it be http://en.wikipedia.org/wiki/Stereoscopy

bodhi• 17 years ago

I think you're right, and diN0bot was referring to "Wiggle stereoscopy".

Here's a few more examples, that to me are more effective than the one on the wikipedia page:

http://www.stereomaker.net/sample/ani/ani_e.htm

cloudkj• 17 years ago

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.

nathanwdavis• 17 years ago

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.

mikeryan• 17 years ago

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.

babyboy808• 17 years ago

It's just showing what can be achieved in CSS, but I agree, I would use JavaScript for a real world solution.

gstar• 17 years ago

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

gfodor• 17 years ago

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

Pure CSS 3D effect

Related Stories