eliminate white space around css rotateY of image - css

Question

After css transform:rotateY of a div I have space covering the area of the original div (not rotated).
I have read that layout cannot adapt after transform but was wondering about another possible solutions.
I read a couple of entries in stackoverflow but was not able to solve my issue.
(I tried display: block or inline-block or float).
Here is a fiddle what I have achieved: white space after image rotateY
The center slide should stretch to fill the space between right side of previous slide and right side of next slide. And it should be responsive (no fixed width in px).
And here is my 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 for an answer: Later I would also like to add more divs, have only three visible and animate the carousel with swipe motion.

Answer 1

You've understood the behaviour right.
If you touch transform property, other parts will not adapt. The initial occupied space (prior to applying transform) is quite dedicated and further changes will not affect that space and same goes for neighbouring elements.
To fill the gap, your best bet is to reverse the left and right values for transform-origins and respect the wrapper workspace as a whole like the code in below and continue developing from there. Keeping transform-origins as their original values will force you to manipulate the .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 very hard to describe animations by words, try to provide samples.
If you're trying to squeeze other divs to a smaller fixed width 50%, then change your approach and modify your code accordingly. Avoid transform property, use only 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 you want the widths property to be 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 you can achieve this by JavaScript. Calculate the non-active slides around the active one, and distribute the width values by their distance from the active one.