Javascript 为什么我的CSS文本缩放动画会创建一个；“弯曲”；运动，我如何消除它？

请注意：我对CSS非常陌生，所以我可能会使用不正确的术语或笨拙的描述。另外，我使用

hover

psuedo类只是为了便于在示例中演示。我在实际代码中没有使用任何psuedo类

下面的代码片段是一个非常简单的CSS转换，我将其应用于一些文本。它的工作原理与我希望的完全一样，只是为了调用转换/动画，我必须使用JavaScript手动将

effect

类添加到元素中

。效果：悬停{
变换原点：左上；
变换：缩放（.5，.5）；
转变：转变1s；
}

在这上面盘旋

这是因为默认的

变换原点是
50%，50%0
（x轴、y轴、z轴）。因此，现在
变换原点
从
50%，50%0
移动到
左上角0
，导致元素在缩小比例时“向内弯曲”

试试这个：


.effect{
变换原点：左上；
}
.效果：悬停{
动画：1s收缩；
}
@关键帧收缩{
从{
变换：比例（1,1）；
}
到{
变换：缩放（.5，.5）；
}
}

在这上面盘旋
我不确定这种奇怪行为的原因。但是，如果除了
transform
之外，您还可以尝试其他样式选项，看看它是否适合您的需要：
@keyframes收缩{到{font size:0.8em；}}