jquery - CSSの「リアルな」影（光源）

Question

下の写真を見てください：

青いボックスはdivです。今私がやろうとしているのは、一種の2.5D機能を実装することです。

灰色の影をやや3Dっぽくしたいのですが。最初は、ボックスシャドウ値に次のような「Y」軸を割り当てることを考えていました。

"box-shadow: -5px -5px 10px" + value.tallness +  "#888"

しかし、結果は上の画像です。

どこかから光源があったように、片側だけに影を作る方法について何かアイデアはありますか？

追加-動く「光源」はどうですか？

Answer 1

どうぞ： http： //jsfiddle.net/KaCDN/15/

光源をドラッグして影に影響を与えます。

背の高いブロック：

• 上、左の境界線が大きい
• さらに影を落とす
• 彼らは影がぼやけています

Answer 2

シャドウをもう少し簡単に移動する方法：

$(document).on('mousemove', function(e) {
    var elm = $("#test"),
        x = ~Math.round((e.pageX - elm[0].offsetLeft - 150) / 30),
        y = ~Math.round((e.pageY - elm[0].offsetTop - 150) / 30),
        z = 10+Math.abs(x)+Math.abs(y),
        cssVal = x+'px '+y+'px '+z+'px 10px #525252';

    elm.css({'-webkit-box-shadow' : cssVal, 'box-shadow' : cssVal });
});

<ahref="http://jsfiddle.net/2f5kw/3/"rel="nofollow">フィドル

Answer 3

より最新の答えは、この正確な問題を処理するShine.js（ http://bigspaceship.github.io/shine.js/ ）のようなライブラリを使用することです。