jquery - 计算由 Jquery 3D 旋转插件创建的新形状的高度

Question

我正在使用这个 jquery 插件来旋转一个 div。我想知道计算新形状高度的数学方程。“新高度”是指形状最顶部到形状最底部的高度，但从上到下是一条直线。我想更改容器 DIV 高度以匹配形状的新高度.

Answer 1

该插件通过在 Y 方向上倾斜一定程度，并在 X 方向上按一定比例缩放来工作。

倾斜度从 0 线性移动到 360。缩放从 100% 线性移动到 0%，然后回到 100%。变换的定义是：

Skew((x,y),degreeX,degreeY) -> (x + tan(degreeX)*y, y + tan(degreeY)*x)

Scale((x,y),scaleX,scaleY) -> (x*scaleX, y*scaleY)

Scale(Skew((x,y),0,deg),scale,0) = (x*scale, y + tan(deg)*x)

转换大小W × H为 的 div ，该 div 的最大高度为 89°：

2*Scale(Skew((W/2,H/2),0,89),1/180,0) = (W*(1/180), H + tan(89°)*W)

New width = W*(1/180) = W/180
New height = H + tan(89°)*W ≈ H + 57.29*W

这可能比你想象的要高很多。

---

atan(0.5)*sin(deg)您可以通过按度倾斜和按 0.0 倍缩放来实现更逼真的旋转cos(deg)。这将给出H + W/290° 的最大高度。