CSS：使用绝对位置变换比例

Question

我的位置有点问题：绝对。让我解释。

悬停后我有这样的事情：

CSS代码：

.option {
    width: 50px;
    height: 50px;
    box-shadow: 1px 1px 1px 1px  #888;
}

.option:hover {
    transform: scale(2.25, 2.25);
    transition-duration: 0.01s;
    z-index:10;
    position: absolute;
}

将鼠标悬停在选项上后，我使用 transform: scale 来放大元素。但是，为了达到预期的效果，我必须添加position: absolute属性 - 这样，该选项在悬停后从 div 中消失。悬停工作正常，但其余 3 个选项向左 - 有什么办法可以解决这个问题吗？我想在悬停后仍显示 4 个选项，而不是剪切其余选项。

没有position:absolute元素就不会离开 div。

Answer 1

通过使用transform-origin，您可以消除使用绝对定位的需要。将变换的原点从默认 ( center) 移动到左上角 ( 0 0)：

.option {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 1px 1px #888;
  display: inline-block;
}

.option:hover {
  transform: scale(2.25, 2.25);
  transition-duration: 0.01s;
  z-index: 1;
  transform-origin: top left;
}

<div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
</div>