梯形圖像滑塊

下面是我正在使用的圖像：http://imgur.com/a/MBM6K - 我對質量表示歉意。目前我無法分享更好的一個。梯形圖像滑塊

對圖像的一些澄清：黑色邊緣是平板電腦的邊緣。它的內部是一個網頁的圖像。

所以，你可以看到，白色部分的形狀是有點梯形。我試圖創建一個滑塊，將白色圖像（網站）滑入平板電腦屏幕。問題是，網站的圖像是矩形而不是梯形。邊緣是透明的，因此它看起來像是一個梯形。

這很好，直到我們滑到下一個圖像。然後我們看到圖像之間有一些透明的空間。

我曾嘗試：

使用平移X圖像之間滑動。隨着圖像返回，我們看到圖像之間的透明空間。不好。
使用絕對位置，並在當前位置上滑動下一個圖像。這也不好，因爲白色圖像的透明部分留在平板電腦的邊緣，您可以看到下一個不透明的部分越過邊緣。

我有一個版本在我使用剪輯路徑：多邊形的地方工作，但我需要IE支持這個，所以這是行不通的。

任何想法？

來源

2016-07-27 user2451412

請分享你試圖調試容易 –

@NagaSaiA碼 - 不幸的是，我相信我不能共享的圖像，否則我會發佈一個小提琴。 – user2451412

用虛擬圖像替換那些圖像 –

哦，當然，使用懸停

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

來源

2016-07-27 19:27:18

梯形圖像滑塊

回答

相關問題