html - 如何增加变换: scale radius when hover

Question

我有一个包含一些数据的矩形表，它的字体大小和宽度非常小(只是盒子形状)每当我将它悬停时，它都会转换:scale(6.0)(尺寸变大 6 倍)例如，我有一个包含 9 个矩形的表格，总元素和最后一个元素位于 x = 500px，y = 500px。当它悬停时它变得更大(6 倍大小)，但是当我的鼠标悬停在 501 501 或更多点时它关闭时，我想增加工作半径，每当我悬停我需要的元素时。我确实将 class 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>