Ответ 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">
относительно позиционируется (или, что более важно, не статически позиционируется), и каждое изображение абсолютно позиционируется внутри него, а также изменяет размер. Когда вы перемещаете мышь, выполняется некоторое интенсивное хрустение числа, чтобы пересчитать новые значения для свойств CSS top
и left
для каждого изображения.
Я написал еще немного об этом на своем веб-сайте и объясню, как создать свою упрощенную версию с нуля: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d
Разделение каждого изображения на слои, однако, автоматизировано, с (шутка в апреле-дураке?) призывает добровольцев сделать это лучше.