xkcd 做xk3d 怎么样？

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

想要改进此问题吗？更新问题，使其关于- Stack Overflow 的主题。

11 年前已关闭。

Answer 1

每个图像都分为多个图层 - 每个图层都是其自己的 PNG 文件，并且包含大量透明度。

所有这些图像都嵌套在

内：

<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>

...

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

我在我的网站上写了更多相关内容，并解释了如何从头开始构建您自己的简化版本：http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

然而，将每个图像分割成层，是自动化的，并呼吁志愿者（愚人节玩笑？）来让它变得更好。

Answer 2

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

Answer 3

是的，它使用脚本 xk3d.js 与 自动系统将漫画分层。

这对某些人来说看起来不错，例如第一个。但其他的，比如 483，由于有斑点的 3D 文本，确实会让你头疼。

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