기울어 진 콘테이너 안의 배경 이미지가 왜곡되지 않은 것처럼 보임

대각선 효과를 만들기 위해 -10 %로 왜곡 한 다양한 슬라이드가 표시되는 회전 목마 (매끄러운)가 있습니다. 그러나 그것의 내용은 또한 비뚤어집니다. 콘텐츠와 배경 이미지를 비뚤어지지 않고 슬라이드 컨테이너에 대각선 효과를 유지할 수있는 솔루션이 있습니까? 여기기울어 진 콘테이너 안의 배경 이미지가 왜곡되지 않은 것처럼 보임

Jsfiddle은 - 당신이해야 할 컨테이너 왜곡 경우 https://jsfiddle.net/czcjt3no/1/

<div class="section"> 
    <div class="grid poly--holder"> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1000/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1100/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1200/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1300/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    <div class="poly-item"> 
     <div class="poly-item__content" style="background-image: url(https://unsplash.it/1400/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div> 
    </div> 
    </div> 
</div> 

.poly--holder { 
overflow: hidden; 

.poly-item { 
    box-sizing: border-box; 
    margin: 0; 
    transform: skewX(-10deg); 
    height: 400px; 

    .poly-item__content { 
    transform: skewX(10deg); 
    background-size: cover; 
    background-position: 50%; 
    height: 100%; 
    } 
}

}

출처

2017-09-29 Frazer Findlater

확인하는 것이 주셔서 감사합니다 @znaneswar이 참조 https://www.sitepoint.com/css3-transform-background-image/ – Znaneswar

. 가장 아름다운 해결책은 아니지만 시작일뿐입니다. - https://jsfiddle.net/czcjt3no/4/ –

내용을 역을-왜곡.

왜곡은 전체 DOM 노드로의 변형입니다. 즉, 모든 자식 노드가 동시에 변형됩니다. 전파를 멈출 수 없습니다.

.parent{ 
    transform: skewX(-10deg); 
} 

.child { 
    transform: skewX(10deg); 
}

Here is your updated fiddle

출처

2017-09-29 12:23:43 Creaforge

예, 시도했지만 아이를 뒤틀어 서 대각선 슬라이드를 유지하고자하는 곳에 똑바로 보이게합니다. 형세. –

예, 업데이트 된 바이올린을 살펴보십시오. 'poly-item__content' div 안에 하위 컨테이너를 추가해야합니다. 이렇게하면 두 번째'skew' 규칙이 첫 번째 규칙보다 우선합니다. – Creaforge

도움을 주셔서 감사합니다. 콘텐츠를 비뚤어지게 만드는 것이 쉬운 부분이지만 배경 이미지가 여전히 비뚤어져있어 문제가됩니다. –

기울어 진 콘테이너 안의 배경 이미지가 왜곡되지 않은 것처럼 보임

답변

관련 문제