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

Question

我正在使用this jquery plugin来旋转div。 我想知道数学方程来计算新形状的高度。通过新的高度＆＃34;我指的是形状最顶部到形状最底部的高度，但是从上到下呈直线。我想改变我的容器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)度倾斜来实现更逼真的旋转，并缩放cos(deg)因子。这将使最大高度H + W/2在90°。