Css 添加变换比例变换时自定义工具提示中断

如果我从第18行和第48行删除

transform

中的

scale

（仅保留

translateY

），代码可以工作，但不正常。我想添加

scale

transition以使过渡更平滑，但这会导致矩形和工具提示不能很好地结合在一起。如何解决这个问题

。工具提示{
显示：块；
背景：#F24B5B；
颜色：白色；
保证金：5em自动；
填充：1em 0；
文本对齐：居中；
宽度：13em；
位置：相对位置；
--rec尺寸：.3em；
--半个rec大小：计算（变量（--rec大小）/2）
}
.工具提示：：之前，
.工具提示：：之后{
位置：绝对位置；
不透明度：0；
变换：缩放（.5）平移Y（1em）；
变换原点：中心-底部；
过渡：
不透明度。3秒放松，
变换。15秒放松
;
}
.工具提示：：之后{
内容：''；
边框：var（--rec大小）实心#0000；
}
.工具提示：：之前{
内容：attr（title）；
宽度：80%；
线高：2米；
边界半径：2米；
背景：#000b；
}
.tooltip.top:：之前{
底部：计算值（100%+var（--rec大小））；
左：10%；
}
.tooltip.top:：after{
边框顶部：var（--rec尺寸）实心#000b；
底部：计算值（100%-var（--rec大小））；
左：计算值（50%-var（-rec大小的一半））；
}
.工具提示：悬停：：在，
。工具提示：悬停：：之后{
不透明度：1；
变换：缩放（1）平移（0）；
}

在我上空盘旋

。工具提示{
显示：块；
背景：#F24B5B；
颜色：白色；
保证金：5em自动；
填充：1em 0；
文本对齐：居中；
宽度：13em；
位置：相对位置；
--rec尺寸：.3em；
--半个rec大小：计算（变量（--rec大小）/2）
}
.工具提示：：之前，
.工具提示：：之后{
位置：绝对位置；
不透明度：0；
变换：缩放（.5）平移Y（1em）；
变换原点：中心-底部；
过渡：
不透明度。3秒放松，
变换。15秒放松
;
}
.工具提示：：之后{
变换：translateY（0.5em）；
}
.工具提示：：之后{
内容：''；
边框：var（--rec大小）实心#0000；
}
.工具提示：：之前{
内容：attr（title）；
宽度：80%；
线高：2米；
边界半径：2米；
背景：#000b；
}
.tooltip.top:：之前{
底部：计算值（100%+var（--rec大小））；
左：10%；
}
.tooltip.top:：after{
边框顶部：var（--rec尺寸）实心#000b；
底部：计算值（100%-var（--rec大小））；
左：计算值（50%-var（-rec大小的一半））；
}
.工具提示：悬停：：在，
。工具提示：悬停：：之后{
不透明度：1；
变换：缩放（1）平移（0）；
}

在我上空盘旋

尝试变换原点：中心150%而不是

变换原点：中间-底部，或下面的答案。这是调整周围，结果发生了还是有任何方法？@LarryN或上面的变换原点：中心140%；谢谢，我只是想知道你是如何通过调整来获得解决方案的？@LarryN要理解缩放是基于原点缩放原则的。：：after和：：before基于不同的变换原点