Javascript xkcd如何处理xk3d？

我对今天的3D网络漫画感到惊讶。他是怎么做到的？它需要手动重做每一个漫画，还是有某种方法可以自动重做

编辑

---

3D漫画仍然可以在

上找到是的，它使用一个脚本，结合一个脚本将漫画拆分为多个层

这件衣服穿在一些衣服上看起来不错，比如说。但是其他人，比如，真的会让你头疼，因为3D文本有污点

---

因此，他们正在寻找志愿者手动将图像分割成更好的层。

这是（半）手动的，Randall正在尝试众包转换，请参见

每个图像都被分割成层-每个层都是自己的PNG文件，包含大量透明度

所有这些图像都嵌套在

中：

。。。

相对定位（或者更重要的是，非静态定位），每个图像都绝对定位在其中，并重新调整大小。当您移动鼠标时，会进行一些密集的数字运算，以重新计算每个图像的

top

和

left

CSS属性的新值

我在我的网站上写了更多关于它的内容，并解释了如何从头开始构建自己的简化版本：

---

然而，每个图像的分层都是自动的（愚人节的笑话？）呼吁志愿者改进。我注意到vgcats也做了一些3d的东西，但它不像xkcd那样广泛，所以我认为它是手动完成的哦，哇，我甚至没有从RSS提要中注意到这一点。谢谢你引导我到这个网站！哇，我甚至没有意识到它们都是3D的，而不仅仅是第一部漫画。这应该被标记为HTML/CSS/JavaScript吗？@Jeff-为什么谢谢你：）

<div id="comic">
    <!-- style attributes omitted -->
    <img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >
</div>