CSS3-Perspektive verwenden und transformieren, um Bild als 3D-Würfel zu rendern

Question

Ich habe PHP und ImageMagick verwendet, um eine 3D-Vorschau eines Leinwanddrucks zu erstellen (siehe Bild unten).

Es Optionen sind die Kantentyp, Tiefe, Größe usw. zu ändern, die AJAX sind Anrufe an ein PHP-Support-Datei, die neu macht die Vorschau mit neuen Einstellungen und ich laden Sie diese in das DOM.

Dies beginnt unseren Server zu überlasten, wenn beschäftigt. Also dachte ich mir, ich könnte das in CSS3 machen und stattdessen das gesamte Vorschau-Rendering clientseitig machen.

Hier ist, was ich bisher:

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

Das Problem, das ich habe, ist oben wie im Bild an den Rändern des Bildes gewickelt wird. Wie kann ich das machen?

Answer 1

Ich habe eine Demo gemacht, mit 2 Elementen, die das gleiche Bild halten.

Legen Sie den Bildursprung entsprechend der Bemaßung fest und es wird übereinstimmen.

.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>