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>