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 ) 移动到左上 Angular ( 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>