Pure CSS 3D effect

[barredo]

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

[mikeryan]

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 → mikeryan]

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

[axod]

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 → axod]

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.

[axod]

>> "Because if the elements are images, they can be cached locally or called remotely -- thus speeding up the process of zoom in real-time."

Can you explain that a bit more, I don't understand at all what you're saying.

CSS: Create a ton of elements to have a :hover style that adjusts the background image positions.

JS: use a mouseover handler and adjust the background image positions. No need for all those extra elements and :hover rules.

>> "there's nothing that JavaScript can do that CSS can't do better."

I'm not really sure if you're joking here or what.

[indiejade → axod]

I'm actually in no position to be arguing this, but it comes up perpetually within communities. I don't have a CS degree, but I've been working with code for . . . well, I don't want to date the age of myself.

I don't like JavaScript. It's too garrulous, periphrastic, and it behaves like a puppet "director" attempting to recursively "show" the user where to look or go "next" on a page. Whenever I see JavaScript pages/ Django "hints" I'm like "SHUT UP!" I'm not an idiot. Most people are not as stupid as you're attempting to make them seem with those annoying little "hints."

Why not use design and fonts and style to "capture" the imagination and attention of users? Users will get it. CSS can and does this, in a subtle nature.

JavaScript wants users to sit through a PowerPoint presentation, shouting at 100X Decibels in their ears at all times, and to direct their hand movements via the mouse.

CSS "focus" handlers allows users to navigate at their own pace, the natural flow of code, quietly . . .

These are UI issues, but essentially that's the argument that most people who hail on the side of JavaScript take: in reality, they have only an illusion of control.

Quote:

CSS: Create a ton of elements to have a :hover style that adjusts the background image positions.

--- Nope. The easiest way is to create one element identifier: either a #Div or a .Class -- and reference that recursively.

[dandelany → indiejade]

Just because Javascript can be used for annoying purposes does not mean Javascript is, itself, annoying. It's just a way to execute code on the client side. CSS is not a true programming language.

>>that's the argument that most people who hail on the side of JavaScript take...

There is no holy war between Javascript and CSS, just like there are no carpenters who argue that a hammer is always better than a screwdriver. They are different tools with different purposes.

[pwmanagerdied → indiejade]

You're craaaaaaaaazy, sir.

[Slashed]

Not sure what you mean, but as far as I can tell, you're saying that images loaded with JavaScript won't be cached by browser(>>cached locally<<)? Though I'm not a JavaScript Ninja, but I think that JS loads images by manipulating the DOM of a page: creating new elements, changing attributes/style. If that's what you mean, then I'm sure that all modern browsers cache these images as well. Or have I completely misunderstood you?

[gfodor]

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

[chaosmachine]

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

[unalone → chaosmachine]

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

[chaosmachine → unalone]

I agree.

[scorxn]

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 → scorxn]

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 → quizbiz]

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.

[scorxn → quizbiz]

Good catch. Updated to include _bg2.

[cloudkj]

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.

[gstar]

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

[Semiapies]

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 → Semiapies]

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

[Semiapies → mbrubeck]

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

That is certainly the same effect, though.

[rimantas → Semiapies]

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/

[nathanwdavis]

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.

[diN0bot]

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 → diN0bot]

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

[bodhi → dkokelley]

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