javascript - CSS/jQuery で要素を回転させたときにドロップ シャドウを同じ方向に保つ

Question

ユーザーが回転できる長方形のボリューム ロッカーを作成し、同じ方向 (下向き) を向いた垂直方向のドロップ シャドウをキャストしたいと考えています。

ただし、CSS の box-shadow を回転要素に使用すると、影が一緒に移動します。

ボックス シャドウの方向を動的に変更して、それをキャストする要素が回転していても配置されたままにする方法はありますか?

ありがとう

Answer 1

デカルト座標で回転を実行する数学を考えてみましょう。

度単位の値 θ を回転行列 R に変換するには、Rを次のように設定します。

ここで、原点からのベクトルとしてx 座標とy座標に設定された影の方向を考えます。

したがって、次の操作を実行して、古い座標x、yから新しい座標a、bを取得します。

= =

function rotate(x, y, theta) {
    var a, b,
        sinTheta = Math.sin(theta),
        cosTheta = Math.cos(theta);
    a = x * cosTheta - y * sinTheta;
    b = y * cosTheta + x * sinTheta;
    return [a, b];
}

thetaとおそらくyを無効にして、レンダリングしたい方法とすべてを一致させたい場合があります。JavaScriptはラジアンで機能するので、度dをラジアンrに変換するには

次に、シャドウを新しい座標aおよびbに設定するだけです。