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

【问题标题】：How does "3D Meninas" work (CSS/Animation)?“3D Meninas”如何工作（CSS/动画）？
【发布时间】：2010-12-26 22:13:03
【问题描述】：

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

谢谢

【问题讨论】：

【解决方案1】：

它的工作原理是将图片垂直划分为单个像素，并为每个像素设置一个 css hover 伪类。有 505 次提到悬停这个词。如果您在不换行的查看器中查看源代码，请注意底部的行非常长（向右滚动）。

【讨论】：

【解决方案2】：

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

通过更改其width 属性，可以简单地挤压和拉伸最深的特征，即右侧墙。

编辑：

【讨论】：