当使用 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或服务器端来做,这很好。