“3D Meninas”如何运作（CSS /动画）？

Question

今天我发现这个网站"3D Meninas"具有很好的3D动画效果。当我查看HTML代码时，似乎没有<script>或事件，所以我猜它只适用于CSS。我不是CSS大师，有人可以告诉我 它是如何工作的吗？

由于

Answer 1

它的工作原理是将图片垂直划分为单个像素，每个像素都有一个css hover伪类。有一百五十五提到悬停这个词。如果您在查看器中查看未包裹线条的源，请注意底部的线条非常长（向右滚动）。

Answer 2

图像被分成大约一百个垂直“切片”。当将鼠标悬停在每个切片上时，每个图像都以精确且硬编码的方式放置。

通过更改其width属性，可以简单地压缩和拉伸具有最深度的功能（右侧墙）。

编辑：

Here's the official explanation by the creator.