flexbox - eliminate white space around css rotateY of image -

after css transform:rotatey of div have space covering area of original div (not rotated). have read layout cannot adapt after transform wondering possible solutions. read couple of entries in stackoverflow not able solve issue. (i tried display: block or inline-block or float). here fiddle have achieved: white space after image rotatey

the center slide should stretch fill space between right side of previous slide , right side of next slide. , should responsive (no fixed width in px).

and here code:

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

if relevant answer: later add more divs, have 3 visible , animate carousel swipe motion.

you've understood behaviour right.

if touch transform property, other parts not adapt. initial occupied space (prior applying transform) quite dedicated , further changes not affect space , same goes neighbouring elements.

to fill gap, best bet reverse left , right values transform-origins , respect wrapper workspace whole code in below , continue developing there. keeping transform-origins original values force manipulate .center div dimensions.

.prev {   width: 50%;   transform: rotatey(-65deg);   transform-origin: right; }  .next {   width: 50%;   transform: rotatey(65deg);   transform-origin: left; }  .center {   width: 100%; } 

it's hard describe animations words, try provide samples.

if you're trying squeeze other divs smaller fixed width 50%, change approach , modify code accordingly. avoid transform property, use 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%; } 

and if want widths property more flexible, like

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

then can achieve javascript. calculate non-active slides around active one, , distribute width values distance active one.