画像スライダー台形の画像

Question

ここで私が協力しているもののイメージです：http://imgur.com/a/MBM6K - 私は品質のために謝ります。私は今より良いものを共有することはできません。

イメージのいくつかの説明：黒い辺はタブレットの端です。その中にはウェブページのイメージがあります。

ご覧のとおり、白い部分の形状は多少台形です。私は白い画像（ウェブサイト）をタブレット画面にスライドさせるスライダーを作成しようとしています。問題は、ウェブサイトの画像が四角形で台形ではないということです。エッジは透明であるため、台形に見えます。

これは次の画像にスライドするまでは問題ありません。そして、画像の間に透明な空間があることがわかります。

• をイメージ間でスライドさせる移動Xを使用した：私は試してみました何

  。戻って画像を に戻すと、画像間の透明な空間が見えます。良くない。

• 絶対位置を使用し、次の画像を現在の画像にスライドさせます。白いイメージの透明部分がタブレットの端にとどまっているので、これはうまくいきませんでした。次の部分の透明でない部分を見ています。

私はclip-path：polygonを使用したところで1つのバージョンを使用していましたが、IEのサポートが必要なので、動作しません。

アイデア？私は、残念ながら、私は画像を共有することはできませんよ信じてそう -

Answer 1

必ずああ、使用ホバー

.container { 
 
    perspective: 500px; 
 
    } 
 
.container div { 
 
    background-color: blue; 
 
    width: 70vw; 
 
    height: 50vh; 
 
    min-height: 200px; 
 
    margin: 0 auto; 
 
    transform: rotatex(-10deg); 
 
    transition: .5s; 
 
    } 
 
.container div:hover { 
 
    transform: rotatex(-40deg);

<div class="container"> 
 
    <div></div> 
 
</div>