使用 CSS 变换属性和过渡，相邻的 div 相互重叠答案

【问题标题】：Adjacent div overlap on top of each other using CSS transform property and transition使用 CSS 变换属性和过渡，相邻的 div 相互重叠
【发布时间】：2018-01-14 23:41:54
【问题描述】：

我正在为我的动画使用 CSS 变换属性 scaleX。见CodePen。不幸的是，左侧的红色框对悬停没有影响，并且它不像其他 3 个那样变形。据我了解，由于红色框没有剩余空间，这就是为什么它无法在悬停时变形。我的问题有什么好的解决方案吗？

HTML

<div class="container-fluid mt-3">
  <div class="row">
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image1"></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image2"></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image3"></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image4"></div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css animation transform

【解决方案1】：

您还可以在:hover 上重置z-index，并最终将transform-origin 重置为第一个和最后一个元素：

.image1 {
  background-color: red;
}

.image2 {
  background-color: green;
}

.image3 {
  background-color: blue;
}

.image4 {
  background-color: pink;
}

.image {
  height: 15vw;
}

.img-holder {
  position: relative;
  width: 100%;
}
.img-holder .image {
  width: 100%;
  position: relative;
  z-index: 5;
  transition: all 0.5s ease;
}
.img-holder .image:hover {
  transform: scaleX(2);
  z-index: 10;
}

.col-sm-3:first-of-type :hover .image {
  transform-origin: top left;
}

.col-sm-3:last-of-type :hover .image {
  transform-origin: top right;
}

.col-sm-3 {
  padding: 0;
}

<div class="container-fluid mt-3">
  <div class="row">
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image1"></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image2"></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image3"></div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="img-holder">
        <div class="image image4"></div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/gc-nomade/pen/dzvypQ

【讨论】：