3D对图像的影响

时间:2012-06-19 15:18:57

标签: javascript jquery html5 jquery-plugins css3

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

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

我需要在2D图像中添加3d效果,以显示图像的“深度”,就像它是真正的3D对象一样。但我不知道用什么来制作这样的东西(jquery插件,其他一些js libary ......)?有人可以给我一些基本指示吗?我在poster.com和simialr网站上看到这是可能的,但是无法弄清楚要做什么。

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

1 个答案:

答案 0 :(得分: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/