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

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

在悬停之后，我有如下内容：

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在将鼠标悬停在选项上后放大元素。 然而，为了达到想要的效果，我必须添加

位置：绝对值

属性-有了这个属性，选项在悬停后退出div。Hover可以正常工作，但是剩下的3个选项是左边的-有没有办法解决这个问题？我希望悬停后仍显示4个选项，而不是剪切其余选项

没有

position:absolute

元素不会脱离div

---

通过使用

变换原点

，您可以消除使用绝对定位的需要。将转换原点从默认（

中心

）移动到左上角（

0

）：

选项{
宽度：50px；
高度：50px；
盒影：1px 1px 1px#888；
显示：内联块；
}
.选项：悬停{
变换：比例（2.25,2.25）；
过渡时间：0.01s；
z指数：1；
变换原点：左上角；
}