Html 在90度文本上添加字母间距时CSS悬停状态问题

当我将

p

标记悬停并在其上添加

字母间距时，它会弄乱整个文本。我想将它悬停，它保持在与字母间距相同的位置


#文本{
位置：绝对位置；
转换：翻译（-50%，-50%）；
左：40%；
最高：50%；
字号：2em；
变换：旋转（90度）；
}
#文本：悬停{
字母间距：10px
}
示例文本旋转
发生闪烁是因为变换原点

错误。您正在旋转文本，因此应该考虑原始变换原点（从

左侧

到右侧）

有关结果，请参阅此更新的代码段

.text{
位置：绝对位置；
变换原点：左上角；
左：70%；
最高：20%；
字号：2em；
变换：旋转（90度）；
}
.文本：悬停{
字母间距：10px；
}

示例文本旋转

css上有2个转换标记
您仍然需要更多的间距填充，以便悬停不会闪烁
另外，我确信您想要一个过渡，所以请尝试以下方法：

#正文{
过渡：字母间距0.5s；
}



#文本{
显示：块；
填充：0；
位置：绝对位置；
左：40%；
最高：50%；
字号：2em；
变换：平移（-50%，-50%）旋转（90度）；
过渡：字母间距0.5s；
}
#文本：悬停{
字母间距：10px
}
示例文本旋转
只需添加
空白：nowrap

顺便说一句，您的第二个
转换将重写第一个。

正确的用法是变换：平移（-50%，-50%）旋转（90度）


#文本{
位置：绝对位置；
变换：平移（-50%，-50%）旋转（90度）；
左：40%；
最高：50%；
字号：2em；
空白：nowrap；
}
#文本：悬停{
字母间距：10px
}
示例文本旋转是预期的行为。在不知道你的意图的情况下，它是不清楚的。我编辑了它，我想当我在上面悬停时，它保持在相同的位置。我认为它移动的原因是因为它变成了两行文字。减少文本大小或增加p div维度应该可以解决问题这是一种过度的做法，不会解决实际问题。UX思考我的朋友，但是通用的很好。是的，这一点并不能解决问题。嗯，这很有帮助，但现在第一个字母没有像默认行为那样移动，我的意思是，这封信可能在扩大。我不知道我说的是否有道理，但你明白我的意思吗？：）@KevinNisay我更新了答案，我希望我明白你的意思：第一封信保持不变。谢谢你的帮助，我已经解决了这个问题。多谢各位@RoyNo担心，@Kevinnisay这就是你要找的我的朋友