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)

size の div を変換すると、divW × Hの最大の高さは 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/290° になります。