Ways to create stretched canvas view

Question

Here is what I want to achive,

Pure image,

Created image,

I have seen lots of apps doing this (http://fineartamerica.com/ is one of them), but I was wondering how it can be done?, what kind of method, algorithm or programming language should I use?

I tried that with css3 bu couldn't get a tangible result, and it won't be a cross browser solution,

-webkit-transform: perspective( 800px ) rotatey( 78deg );

I'm looking for a server side solution.

Answer 1

Is this what your looking for http://css-tricks.com/creating-a-3d-cube-image-gallery/ ?

EDIT:

Based on the url above i made a fiddle that is pretty close to what you have in the image

In order to achieve this unfortunately i had to use 2 images

The HTML markup is kinda easy . 1 container for front side . 1 for right side

<div class="cube">
    <div class="cube-face  cube-face-front"></div>
    <div class="cube-face  cube-face-right"></div>
</div>

Then inside the CSS some parts are more important

The right side is moved & rotated

left: 600px; /* Moved left 100% of image */

outline: 1px solid transparent; /* Used to smoothen edges in Firefox */

transform: rotateY(25deg) translate3d(0px, 0px, 0px);
-webkit-transform: rotateY(25deg) translate3d(0px, 0px, 0px);
-ms-transform: rotateY(25deg) translate3d(0px, 0px, 0px);

The front side is translated on the Z axis with the same amount that the right side has been rotated

transform: translate3d(0, 0, 25px);
-webkit-transform: translate3d(0, 0, 25px);
-ms-transform: translate3d(0, 0, 25px);

hope this helps

• try to always use all prefixes ( -o-, -moz-, -webkit, -ms-) when writing CSS3 animations (effects)

EDIT 2:

Forgot about the shadow . i used a box-shadow generator and applied a shadow to each side .

-webkit-box-shadow: 7px 8px 17px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 8px 17px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 8px 17px 0px rgba(50, 50, 50, 0.75);

updated fiddle

EDIT 3:

fixed to use only 1 image http://jsfiddle.net/S4eBd/3/

what i did was to make use of background position

front side received background-position: left top;

right side received background-position: right top;

make sure that the 'holder' container is smaller then the image with a % greater then the right side