使用CSS3透視圖和變換將圖像渲染爲3D立方體

Question

我一直使用PHP和ImageMagick來生成畫布打印的3D預覽（請參見下圖）。

有選項來改變這是AJAX調用其中PHP支持文件的邊緣類型，深度，大小等重新呈現在新設置的預覽和我重新加載到DOM。

這開始在忙時超載我們的服務器。所以我想我可以在CSS3中做到這一點，並做所有的預覽渲染客戶端。

這是我到目前爲止有：

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

我有披着邊緣的圖像就像上圖中的問題。我怎樣才能做到這一點？

Answer 1

我做了一個演示，其中2個元素保持相同的圖像。

只需設置相應的圖像原點上他們的尺寸，它會匹配。

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