XKCD是如何做xk3d？ [英] How is xkcd doing xk3d?

问题描述

我很惊讶今天的在 XKCD 发现3D NOCOW地图。他会怎么做呢？难道手动要求重做每一个漫画或者是有一些方法来自动执行它？

I'm amazed by today's 3D webcomics found at xkcd. How would he have done that? Would it require manually redoing every single comic or is there some way to automate it?

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

The 3D comics are still available on http://xk3d.xkcd.com

推荐答案

每个图像分割成层 - 每一层是它自己的PNG文件，其中包括了大量的透明度

Each image is split into layers - each layer is its own PNG file and includes a lot of transparency.

所有这些图像的＆LT; D​​IV＆GT; ：

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

...的＆LT; D​​IV ID =漫画＆GT; 相对位置（或更重要的是，非静态定位），每个图像是绝对定位在它，以及重新调整大小。当你移动鼠标时，一些激烈的数字运算完成后重新计算新值的顶和离开的CSS属性每个图像。

... the <div id="comic"> is relatively positioned (or more importantly, non-statically positioned) and each image is absolutely positioned within it, as well as re-sized. As you move the mouse, some intense number crunching is done to recalculate new values for the top and left CSS properties of each image.

我写了一些更多关于它在我的网站，并解释如何从根本上建立自己的简化版本：<一href="http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d">http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

I wrote some more about it on my web site, and explain how to build your own simplified version from the ground up: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

每个图像转换层的分裂，但是，是自动的，有（愚人节的玩笑？）招募志愿者，以使其更好。

The splitting of each image into layers, however, is automated, with a (April fools joke?) call for volunteers to make it better.

这篇关于XKCD是如何做xk3d？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！