javascript - 实现弹出书效果的算法是什么

Question

下面是一个效果示例：

http://2012.beercamp.com/

我查看了源代码，显然有一些算法计算旋转。有没有这种效果的资源，或者有人可以分解并用外行术语解释算法吗？

我尝试在 jsfiddle.net jsfiddle中玩耍，但没有接近它。

Answer 1

Smashing Magazine在那个确切的网站上做了一个完整的细分。

编辑，回复评论：adj不是“边”，而是“长度”。为了使弹出式书能够自行折叠而不是一团糟，内容的背景必须与它们所在的页面成一定角度。完全水平，书不起作用，完全垂直，从书的正面看不到任何东西。我们的作者选择了水平 15°，但这个选择是任意的。

一旦他选择了 15°，他就需要知道书的宽度。这就是他所说adj的。它是通过使用固定的“场景宽度”和任意角度创建的书的大小。他使用 Pythygoras 定理来得到它（因为数学不是他的强项），但如果你愿意，你可以用以下内容替换该行：

var adj = POPUP_WIDTH * Math.cos(degToRad(15));