How does "3D Meninas" work (CSS/Animation) ?

Question

Hi all, Today i found this site, "3D Meninas", with a nice effect of 3D animation. When I look at the HTML code, it seems that there is no <script> or event, so I guess it only works with CSS. I'm not a CSS guru, can someone tell me how it works ?

Thanks

Answer 1

It works by dividing the picture up vertically into single pixels and having a css hover pseudo-class for each one. There are 505 mentions of the word hover. If you are looking at the source in a viewer that doesn't wrap lines, note that the lines at the bottom are extremely long (scroll to the right).

Answer 2

The image is divided into about a hundred vertical "slices". When hovering over each slice, each image is placed in a precise and hard-coded fashion.

The feature with most depth, the right-hand wall, is simply squished and stretched by changing its width attribute.

Edit:

Here's the official explanation by the creator.