Javascript 计算旋转后长方体阴影的位置

使用CSS在旋转的元素上放置阴影时，阴影取决于元素的旋转

.box{
宽度：200px；
高度：100px；
位置：绝对位置；
左：20px；
背景色：#BBF；
-moz盒阴影：10px 10px 5px#888；
-网络工具包盒阴影：10px 10px 5px#888；
盒影：10px 10px 5px#888；
}
#框1{
顶部：20px；
}
#框2{
顶部：170px；
-webkit变换：旋转（20度）；
-moz变换：旋转（20度）；
-o变换：旋转（20度）；
-ms变换：旋转（20度）；
}
#框3{
顶部：80px；
左：250px；
-webkit变换：旋转（120度）；
-moz变换：旋转（120度）；
-o变换：旋转（120度）；
-ms变换：旋转（120度）；
}

---

为了在所有元素上复制相同的阴影，无论是否旋转，我最终使用了以下方法：

var shadowOffset = 13;
var shadowX = Math.round(Math.sin(angle * (Math.PI / 180)) * shadowOffset, 2);
var shadowY = Math.round(Math.cos(angle * (Math.PI / 180)) * shadowOffset, 2);

适用于框阴影参数，如下所示：

$("#box2").css({ "box-shadow": shadowX + "px " + shadowY + "px 5px #888" });

下面是一个例子：

它并不完美，尤其是在阴影位于两个像素之间的小元素上，但它可以工作。

根据这里的答案：，您可以在CSS中仅使用变换和伪元素来完成此操作。
关键是变换原点随链接变换中的元素一起移动。以下是所有元素具有相同阴影方向的示例：

.box{
宽度：200px；高度：100px；
位置：绝对位置；
左：20px；
}
.盒子：以前{
内容：''；
位置：绝对位置；
顶部：5px；左侧：5px；
宽度：190px；高度：90px；
背景色：#888；
盒影：0px 0px 5px 5px#888；
}
.盒子：之后{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；高度：100%；
背景色：#BBF；
}
#框1{top:20px；}
#box1:before{transform:translate（10px，10px）；}
#框2{top:170px；transform:rotate（20度）；}
#框2:在{变换：旋转（-20deg）平移（10px，10px）旋转（20deg）；}
#框3{顶部：80px；左侧：250px；变换：旋转（120度）；}
#框3:在{transform:rotate（-120deg）translate（10px，10px）rotate（120deg）}之前

---

我编写了一个

convertOffset

函数，它获取x和y阴影坐标和角度，并返回新的x/y坐标以匹配旋转。这不仅适用于任何阴影位置，而且还支持插入阴影。尝试编辑下面的代码段并尝试使用不同的值

var xOffset=-4；
var yOffset=5；
var颜色='4px 0#222'；
var inset=false；
对于（变量i=1；i<6；i++）{
var el=document.getElementById（'div'+i）；
变量度=（i-1）*26；
变量偏移=转换偏移（xOffset，yOffset，度）；
el.style.transform='旋转（'+度+'度）'；
el.style.boxShadow=（插图？'inset'：''）+偏移量[0]+'px'+偏移量[1]+'px'+颜色；
}
功能偏移（x、y、deg）{
var弧度=度*Math.PI/180；
var sin=数学sin（弧度）；
var cos=数学cos（弧度）；
返回[
数学圆（（x*cos+y*sin）*100）/100，
数学四舍五入（（-x*sin+y*cos）*100）/100
];
}

.box{
宽度：100px；
高度：50px；
背景：浅蓝色；
利润率：35px 8px；
显示：内联块；
}

我喜欢它-听起来是个有趣的挑战。我没有时间写一个完整的答案，但是想象光源的位置和x，y，z的值。然后还要考虑所有框的Z值。（z值为文件上方的高度）。从这里开始，数学真的很简单……13的意义是什么？@Olson.dev这只是阴影偏移。比较与此链接的JSFIDLE，您会注意到我将13替换为45，阴影距离对象更远。我将编辑我的答案，以更好地说明这一点。谢谢