「3D Meninas」如何工作（CSS /動畫）？

Question

今天我發現這個網站，"3D Meninas"，具有很好的3D動畫效果。當我查看HTML代碼時，似乎沒有<script>或事件，所以我猜它只能用於CSS。我不是一個CSS大師，有人能告訴我如何它的作品？

由於

Answer 1

它通過劃分畫面垂直向上成單像素和具有的CSS hover僞類爲每一個。有505個提到懸停字。如果您在查看器中未查看線條的源代碼，請注意底部的線條非常長（向右滾動）。

Answer 2

圖像被分成大約一百個垂直「切片」。當將鼠標懸停在每個切片上時，每個圖像都將以精確和硬編碼的方式進行放置。

通過改變width屬性，可以簡單地擠壓和拉伸最深處的特徵（右側牆）。

編輯：

Here's the official explanation by the creator.