Question

在css变换之后：div的rotateY我有空间覆盖原始div的区域（未旋转）。我已经读过在转换后布局无法适应但是想知道另一种可能的解决方案。我在stackoverflow中读了几个条目但是无法解决我的问题。（我尝试过显示：block或inline-block或float）。这是我所取得的成就：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之前）是非常专用的，进一步的更改不会影响该空间，对于相邻元素也是如此。

要填补这一空白，最好的办法是撤消left的{{1}}和right值，并尊重transform-origins工作空间作为一个整体，如下面的代码并从那里继续发展。将wrapper保留为原始值会强制您操纵transform-origins div尺寸。

.center

用文字描述动画非常困难，试着提供样本。

如果您尝试将其他div压缩到较小的固定宽度50％，那么请更改您的方法并相应地修改您的代码。避免.prev { width: 50%; transform: rotateY(-65deg); transform-origin: right; } .next { width: 50%; transform: rotateY(65deg); transform-origin: left; } .center { width: 100%; }属性，仅使用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

然后你可以通过JavaScript实现这一目标。计算活动幻灯片周围的非活动幻灯片，并将宽度值与活动幻灯片的距离进行分配。

消除css rotateY图像周围的空白区域

1 个答案: