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。