我需要一封用css翻过来的信_Css_Text

我需要一封用css翻过来的信

css text

我需要一封用css翻过来的信,css,text,Css,Text,我知道你可以将文本倒置，但我正在尝试将一个字母倒置，这可能吗？使用倒置类创建一个跨度，定义倒置样式，并将其应用于单个字母 <html> ... Upside down <span class="upsidedown">U</span>. ... </html> ... 颠倒的美国。 ... 例如，网上有许多资源讨论如何定义180度旋转您可以使用CSS变换，基本上是围绕x轴旋转。将字母包装在span元素中，并使其成为内联块。示例（适用于现代浏

我知道你可以将文本倒置，但我正在尝试将一个字母倒置，这可能吗？

使用倒置类创建一个跨度，定义倒置样式，并将其应用于单个字母

<html>
...
Upside down <span class="upsidedown">U</span>.
...
</html>


...
颠倒的美国。
...

例如，网上有许多资源讨论如何定义180度旋转

您可以使用CSS变换，基本上是围绕x轴旋转。将字母包装在

span

元素中，并使其成为内联块。示例（适用于现代浏览器）：


.上下{
显示：内联块；
-webkit变换：rotateX（180度）；
变换：rotateX（180度）；
}
这是一封颠倒过来的信：J

然而，CSS转换在应用于字母时，往往会产生排版效果不佳的结果，特别是对于衬线字体。定位旋转的元素也很困难，例如，如果要使其显示在文本基线上（但问题中未指定）

考虑分析原始问题，尝试找到不同的方法。例如，如果您需要将某个字母颠倒过来，您可能会发现一个符合您需要的Unicode字符

将其放在自己的容器中？有很多资源，但根据我的经验，没有一个能很好地工作。下面是你在行动中链接到的一个：在Chrome中，U在它旁边的文本上方。你应该将这个观察添加到你的问题中！谢谢你的工作，但我知道我的字都错过了。像“David”一样，我只希望David中的A被翻转，但当我应用类时，间距被挤压在一起，并考虑如何调整。我知道我可以用字母spacingGood回答，尤其是关于最后的评论，希望人们贴出的每个答案都是这样的。。。

<style>
.upsidedown {
  display: inline-block;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg); 
}
</style>
Here is a letter turned upside down: <span class="upsidedown">J</span>