사다리꼴 이미지가있는 이미지 슬라이더

다음은 내가 함께 일하는 이미지입니다. http://imgur.com/a/MBM6K - 품질이 좋지 않습니다. 나는 더 나은 순간을 나눌 수 없다.사다리꼴 이미지가있는 이미지 슬라이더

이미지의 일부 설명 : 검은 색 가장자리는 타블렛의 가장자리입니다. 그 안에는 웹 페이지의 이미지가 있습니다.

흰색에서 볼 수 있듯이 흰색 부분의 모양은 다소 사다리꼴입니다. 흰색 이미지 (웹 사이트)를 태블릿 화면으로 슬라이드하는 슬라이더를 만들려고합니다. 문제는 웹 사이트의 이미지가 사각형이며 사다리꼴이 아니라는 것입니다. 가장자리는 투명하여 사다리꼴 인 것처럼 보입니다.

다음 이미지로 슬라이드 할 때까지는 문제가 없습니다. 그런 다음 이미지 사이에 약간의 공간이 있음을 알 수 있습니다.

내가 시도하는 것 : 이미지 사이에 슬라이드 translateX를 사용

. 이미지가 뒤쪽으로 돌아가는 이면 이미지 사이에 투명한 공간이 나타납니다. 안좋다.
절대 위치를 사용하고 현재 이미지 위로 다음 이미지를 밀어 넣습니다. 흰색 이미지의 투명한 부분이 타블렛의 가장자리에 머물러 있기 때문에 이것은 좋지 않았습니다. 가장자리 위를 지나가는 다음 부분의 투명하지 않은 부분을 볼 수 있습니다.

나는 clip-path : polygon을 사용하는 곳에서 작동하는 하나의 버전이 있었지만 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

사다리꼴 이미지가있는 이미지 슬라이더

답변

관련 문제