Question

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

example http://img171.imageshack.us/img171/2585/decacb00845442de800a5c5.png

我需要在2D图像中添加3d效果，以显示图像的“深度”，就像它是真正的3D对象一样。但我不知道用什么来制作这样的东西（jquery插件，其他一些js libary ......）？有人可以给我一些基本指示吗？我在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/

3D对图像的影响

1 个答案: