이미지의 CSS 회전 주위에 공백을 제거

Question

CSS 변환 후 : div의 rotateY 원래 div (회전되지 않음)의 영역을 덮는 공간이 있습니다. 저는 레이아웃이 변형 된 후에는 적응할 수 없지만 다른 가능한 솔루션에 대해 궁금해하고 있다는 것을 읽었습니다. stackoverflow에서 몇 가지 항목을 읽었지만 내 문제를 해결할 수 없었습니다. (디스플레이를 사용해 보았습니다 : 블록 또는 인라인 블록 또는 플로팅). 다음은 내가 달성 한 바이올린입니다. white space after image rotateY

센터 슬라이드는 이전 슬라이드의 오른쪽과 다음 슬라이드의 오른쪽 사이의 공간을 채우기 위해 늘려야합니다. 응답 성이 있어야합니다 (고정 된 너비는 px가 아닙니다). 관련 만약

#wrapper { 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
} 

.slide { 
    height: 200px; 
    background-image: url(http://placehold.it/600x300); 
    background-position: center; 
    background-size: cover; 
    color: #fff; 
    font-size: 20px; 
    font-family: sans-serif; 
    text-align: center; 
} 

.prev { 
    width: 50%; 
    transform: rotateY(-65deg); 
    transform-origin: left; 
} 

.next { 
    width: 50%; 
    transform: rotateY(65deg); 
    transform-origin: right; 
} 


<div id="wrapper"> 
    <div class="slide prev">previous slide</div> 
    <div class="slide center">active slide</div> 
    <div class="slide next">next slide</div> 
</div> 

대답을 :

그리고 여기 내 코드입니다 나중에 나는 또한 세 개의 볼을 가지고, 더 된 div를 추가하고 슬쩍 모션 회전 목마 애니메이션 싶습니다.

Answer 1

올바른 행동을 이해했습니다.

transform 속성을 터치하면 다른 부분이 적용되지 않습니다. 초기 점유 공간 (transform 적용 이전)은 상당히 헌신적이며 추가 변경 사항은 해당 공간에 영향을 미치지 않으며 인접 요소에 대해서도 동일하게 적용됩니다.

이 공백을 채울하려면 가장 좋은 방법은 transform-origins의 left 및 right 값을 역 아래의 코드와 같은 전체 wrapper 작업 공간을 존중하고 거기에서 개발을 계속하는 것입니다. transform-origins을 원래 값으로 유지하면 .center div 크기를 조작해야합니다.

.prev { 
    width: 50%; 
    transform: rotateY(-65deg); 
    transform-origin: right; 
} 

.next { 
    width: 50%; 
    transform: rotateY(65deg); 
    transform-origin: left; 
} 

.center { 
    width: 100%; 
} 

단어로 애니메이션을 설명하는 것은 매우 어렵습니다. 샘플을 제공하십시오.

다른 div를 더 작은 고정 너비 50 %로 좁히려면 접근 방식을 변경하고 적절하게 코드를 수정하십시오. transform 속성을 사용하지 않으려면 width 만 사용하십시오.

.slide { 
    height: 200px; 
    width: 25%; 
    background-image: url(http://placehold.it/600x300); 
    background-position: center; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    color: #fff; 
    font-size: 20px; 
    font-family: sans-serif; 
    text-align: center; 
} 

.slide.active { 
    width: 100%; 
} 

그리고 당신이 width의 속성이

1st div 9% 
2nd div 12% 
3rd div 20% 
4th div 100% # .active slide 
3rd div 20% 
2nd div 12% 
1st div 9% 

처럼, 더 유연하게하려면 당신은 자바 스크립트가이 작업을 수행 할 수 있습니다. 활성 슬라이드 주변의 비활성 슬라이드를 계산하고 활성 너비와의 거리를 기준으로 너비 값을 분산시킵니다.