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 :)

@Diodeus well, if i will get effect like this, why not. What to use to do that? — SomeoneS, Jun 19 '12 at 15:53
http://stackoverflow.com/questions/10493468/html5-canvas-with-predefined-image http://stackoverflow.com/search?q=skew+canvas — Diodeus - James MacFarlane, Jun 19 '12 at 16:02

score 1 · Accepted Answer · answered Jun 19 '12 at 17:36

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/

answered Jun 19 '12 at 17:36

Puyol

3,084
5
25
33

Why don't you use a pseudo class instead creating another useless `
`?
– Derek 朕會功夫 Jun 19 '12 at 19:19
Wow, this is very simple and nice, tnx a lot ! :) – SomeoneS Jun 19 '12 at 19:22

3D effect on image

1 Answers1