在 CSS/jQuery 中的旋转元素上保持相同方向的阴影 [重复]

【问题标题】：Keep drop shadows in the same direction on rotating element in CSS/jQuery [duplicate]在 CSS/jQuery 中的旋转元素上保持相同方向的阴影 [重复]
【发布时间】：2013-08-24 14:15:20
【问题描述】：

我想创建一个可以由用户旋转的矩形音量摇杆，并投射一个垂直的阴影，保持朝向相同的方向（向下）。

但是，在旋转元素上使用 CSS 的 box-shadow 会导致阴影随之移动。

有没有办法动态修改盒子阴影的方向，即使投射它的元素正在旋转，它也能保持原状？

谢谢

【问题讨论】：

你是如何实现轮换的？
你目前有什么代码？一个 jsfiddle 会很有帮助。
你能做个小提琴吗？我的意思是，我已经制作了one，但我不知道矩形音量摇杆是什么，所以我不知道它应该是什么样子。
@Vector：我认为 OP 说的类似于jsfiddle.net/v6oaoogd/2 唯一的区别是阴影的方向必须始终相同

标签： javascript jquery css rotation shadow

【解决方案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 在 radians 中工作，因此要将度数 d 转换为弧度 r

现在您只需将阴影设置为新坐标 a 和 b。

【讨论】：