3

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またはサーバー側で行う必要があると仮定していますが、それは問題ありません。

4

3 に答える 3

3

回転しているかどうかに関係なく、すべての要素でシャドウをいくらか同じように複製するために、私は次を使用することになりました。

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" });

そしてここに例があります：http：//jsfiddle.net/3Ybr7/1/

特に影が2つのピクセルの間に配置される小さな要素では完全ではありませんが、ある程度は機能します。

于 2012-01-12T10:02:29.973 に答える