3D effect on image

Question

This is what i want to achive with some web technology:

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

I need to add 3d effect to 2d image, to show "depth" of image, like it is real 3d object. But i have no idea what to use to make something like this (jquery plugin, some other js libary...)? Can someone give me some basic directions? I saw this is possible on poster.com and simialr sites but cant figure out what to do.

Ofc, i don want to steal scripts from that sites :)

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;}

Demo:
http://jsfiddle.net/ewz3E/