在使用CSS为旋转元素添加阴影时,阴影的位置会根据元素的旋转而改变。这里有一个例子:
.box {
width: 200px;
height: 100px;
position: absolute;
left: 20px;
background-color: #BBF;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
#box1 {
top: 20px;
}
#box2 {
top: 170px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
}
#box3 {
top: 80px;
left: 250px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
}
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
在旋转后是否有可能计算出阴影应该落在哪里,以便阴影看起来来自所有元素的同一光源?我假设我需要使用JavaScript或服务器端来完成这个任务,这是可以的。