javascript - 图像上的 3D 效果

Question

这就是我想通过一些网络技术实现的目标：

例如 http://img171.imageshack.us/img171/2585/decacb00845442de800a5c5.png

我需要为 2d 图像添加 3d 效果，以显示图像的“深度”，就像它是真实的 3d 对象一样。但我不知道用什么来制作这样的东西（jquery插件，其他一些js库......）？有人可以给我一些基本的指示吗？我在poster.com和simialr网站上看到这是可能的，但不知道该怎么做。

Ofc，我不想从那些网站窃取脚本 :)

Answer 1

HTML：

<img src="http://lorempixel.com/400/200" alt /><div class="cubus"></div>​

CSS：

div.cubus
{
    height:200px;
    width: 17px;
    margin-top:-5px;
    box-shadow: inset -10px -8px 16px -9px #CCC;
transform:skew(0, -30deg);
-ms-transform:skew(0, -30deg); /* IE 9 */
-moz-transform:skew(0, -30deg); /* Firefox */
-webkit-transform:skew(0, -30deg); /* Safari and Chrome */
-o-transform:skew(0, -30deg); /* Opera */
    float:left;
}

img{float:left;}

演示：http:
//jsfiddle.net/ewz3E/