消除图像的 css rotateY 周围的空白答案

【问题标题】：eliminate white space around css rotateY of image消除图像的 css rotateY 周围的空白
【发布时间】：2017-04-14 16:48:56
【问题描述】：

在 div 的 css transform:rotateY 之后，我的空间覆盖了原始 div 的区域（未旋转）。我读过布局在转换后无法适应，但想知道另一种可能的解决方案。我在 stackoverflow 中阅读了几个条目，但无法解决我的问题。（我试过 display: block 或 inline-block 或 float）。这是我所取得的成就：white space after image rotateY

中间幻灯片应拉伸以填充上一张幻灯片右侧和下一张幻灯片右侧之间的空间。而且它应该是响应式的（没有固定的像素宽度）。

这是我的代码：

#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，只有三个可见并通过滑动动作为轮播设置动画。

【问题讨论】：

标签： css flexbox transform

【解决方案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%;
}

如果你想让widths 属性更灵活，比如

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

那么你可以通过 JavaScript 来实现。计算活动幻灯片周围的非活动幻灯片，并根据它们与活动幻灯片的距离分配宽度值。

【讨论】：