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>