Use CSS3 perspective and transform to render image as 3d cube - php

Question

I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?

Answer 1

I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>