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

Question

I'm making CSS-only carousel and trying to give effect like below.

1) Active element has large scale/opacity value.
2) As far from active element, scale/opacity become small.

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

However, space between elements are not equal as I expected. How can I fix this? When I looked for SO question, it works with transform-origin. But, I couldn't find how solve this.

Answer 1

Scaled (using transform: scale) element acts something like absolute, it doesn't affect other DOM element with it's size changes. Use width and height instead.

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