

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

------
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
I see nothing wrong with that. More tools means more art means more fun.

~~~
chaosmachine
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
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
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.

------
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
Probably this one: [http://www.cssquirrel.com/2009/12/04/the-parallax-header-
how...](http://www.cssquirrel.com/2009/12/04/the-parallax-header-how-i-do-it/)

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

That is certainly the same effect, though.

------
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
Could it be <http://en.wikipedia.org/wiki/Stereoscopy>

~~~
bodhi
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>

