如何增加变换：悬停时缩放半径

Question

我有一些包含一些数据的矩形表，它的字体大小和宽度非常小（只是盒子形状） 每当我将其悬停时，它都会发生变化： scale(6.0) （尺寸变大 6x） 例如，我有一个包含 9 个矩形的表格，总元素和最后一个元素位于 x = 500px，y = 500px。 当它悬停时它变得更大（它的大小的 6 倍），但是当我的鼠标悬停点 501 501 或更多时它关闭时，我想增加工作半径，每当我需要悬停元素时。 我确实使用类 multi 来增加悬停时需要增加大小的元素。

.multi{
    background-color: #ffffff;
    transition: transform .2s; /* Animation */
    border: 1px solid black;
}

.multi:hover {
    transform: scale(6.0);
}

Answer 1

如果需要，可以删除宽度、高度和背景属性。还将比例更改为 6.0（我以 1.2 为例）。

.multi {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: transform; /* Safari */
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-property: transform;
    transition-duration: 0.2s;
}

.multi:hover {
    transform: scale(1.2);
}

<div class="multi"></div>