CSS：为什么 transform: scale 不适用于 justify-content: space-around？

Question

我正在制作 CSS-only 轮播并尝试产生如下效果。

1) 活动元素具有较大的 scale/opacity 值。
2) 离活动元素越远，scale/opacity变小。

.carousel {
  display: flex;
  min-height: 100vh;
  justify-content: space-around;
  align-items: center;
}

.carousel__box {
  width: 150px;
  height: 500px;
  background: skyblue;
}

.carousel__box:nth-child(1),
.carousel__box:nth-child(5) {
  opacity: 0.6;
  transform: scale(0.8);
}


.carousel__box:nth-child(2),
.carousel__box:nth-child(4) {
  opacity: 0.8;
}

.carousel__box:nth-child(3) {
  transform: scale(1.2);
}

<div class="carousel">
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
</div>

然而，元素之间的space并不像我预期的那样相等。我怎样才能解决这个问题？当我寻找 SO 问题时，它适用于 transform-origin。但是，我找不到如何解决这个问题。

Answer 1

考虑保证金以纠正规模效应：

.carousel {
  display: flex;
  min-height: 100vh;
  justify-content: space-around;
  align-items: center;
}

.carousel__box {
  width: 150px;
  height: 500px;
  background: skyblue;
}

.carousel__box:nth-child(1),
.carousel__box:nth-child(5) {
  opacity: 0.6;
  transform: scale(0.8);
  margin:0 -15px; /* you scale by 0.8 so -0.2x150px = -30px that we split on both side */
}


.carousel__box:nth-child(2),
.carousel__box:nth-child(4) {
  opacity: 0.8;
}

.carousel__box:nth-child(3) {
  transform: scale(1.2);
  margin:0 15px; /* you scale by 1.2 so 0.2x150px = 30px that we split on both side */
}

body {
  margin:0;
}

<div class="carousel">
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
</div>

使用 CSS 变量，您可以获得通用且易于处理的内容：

.carousel {
  display: flex;
  min-height: 100vh;
  justify-content: space-around;
  align-items: center;
}

.carousel__box {
  --w:150px; /* the width */
  --s:1;     /* the scale factor */
  width: var(--w);
  height: 500px;
  background: skyblue;
  transform:scale(var(--s));
  margin: 0 calc(var(--w)*(var(--s) - 1)/2)
}

.carousel__box:nth-child(1),
.carousel__box:nth-child(5) {
  opacity: 0.6;
  --s: 0.8;
}


.carousel__box:nth-child(2),
.carousel__box:nth-child(4) {
  opacity: 0.8;
}

.carousel__box:nth-child(3) {
  --s: 1.2;
}

body {
  margin:0;
}

<div class="carousel">
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
</div>

Answer 2

缩放（使用 transform: scale）元素的行为类似于 absolute，它不会影响其他 DOM 元素的大小变化。请改用 width 和 height。

.carousel {
  display: flex;
  min-height: 100vh;
  justify-content: space-around;
  align-items: center;
}

.carousel__box {
  --w: 100px;
  --h: 100px;
  width: var(--w);
  height: var(--h);
  background: skyblue;
}

.carousel__box:nth-child(1),
.carousel__box:nth-child(5) {
  opacity: 0.6;
  width: calc(var(--w) / 1.2);
  height: calc(var(--h) / 1.2);
}


.carousel__box:nth-child(2),
.carousel__box:nth-child(4) {
  opacity: 0.8;
}

.carousel__box:nth-child(3) {
  width: calc(var(--w) * 1.2);
  height: calc(var(--h) * 1.2);
}

<div class="carousel">
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
  <div class="carousel__box"></div>
</div>

CSS：为什么 transform: scale 不适用于 justify-content: space-around？

CSS: Why transform: scale is not working with justify-content: space-around?

html

css

css-transforms