在css中应用基于3d向量的渐变

Question

我有这个javascript（标记和css在this fiddle）

$('input[type=range]').change(function (e) {
    $('.box').css('transform','rotateY('+($(this).val()/100)*360+'deg) rotateX(20deg)');
});

所以基本上我试图根据来自某个方向的某些方向光照亮立方体。

让我们说方向光来自（x，y，z）......（100,100,100）到（0,0,0）。

然后，渐变需要基于其从侧面的矢量对齐而更暗，并且取决于另一侧更亮或相同。这一切都是可行的，但我不能把它包裹起来，因为转换数据来自3dmatrix，这超出了我的范围。

/* .front {    background: linear-gradient(to bottom, blue, rgba(220,30,30,0));} */

伪代码可能如下所示：

• 获得div的基色。
• 根据变换获取立方体3d矢量及其父项（如果有的话）。
• 计算应该是什么角度。
• 计算每侧的基色应该是什么强度..更好的是在里面添加第二个div并在其上应用透明渐变，这样可以轻松实现均匀的图片和内容。
• 申请
• 等