xkcd怎么做xk3d？

Question

我对今天在xkcd上发现的3D网络漫画感到惊讶.他怎么会这样做的？是否需要手动重做每一部漫画,还是有某种方法可以实现自动化？

编辑

3D漫画仍然可以在http://xk3d.xkcd.com上找到

Answer 1

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

所有这些图像都嵌套在<div>:

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

... <div id="comic">相对定位(或更重要的是,非静态定位),每个图像绝对定位在其中,以及重新调整大小.当你移动鼠标时,一些激烈的数字运算完成后,为重新计算新的价值观top和left每个图像的CSS属性.

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

然而,将每个图像分成几层是自动化的,一个(愚人节玩笑？)呼吁志愿者让它变得更好.

Answer 2

这是(半)手动,兰德尔试图众包转换,请看这里