Html rotateY（）文本模糊/像素化

我已经旋转并透视了带有文本的3d元素。文本的保真度很低。有什么办法可以改进吗

非常简单的示例代码：

<h1 style = "transform: perspective(150px) rotateY(-45deg);width:150px;">
    This is text
</h1>

这是文本

这看起来更好：

<h1 style="font-family: 'Arial'; transform: perspective(150px) rotateY(-45deg); width: 300px;">
This is text</h1>

这是文本

或者这个：

<h1 style = "text-shadow: 0 0 0 #000;transform: perspective(150px) rotateY(-45deg);width:150px;">This is text</h1>

这是文本

我认为您需要父容器才能获得正确的视角

-webkit-perspective: 900px;

将文本悬停以进行可视化

div{
-webkit透视图：100px；
-webkit变换样式：保留-3d；
}
h1{
显示：内联块；
过渡：所有的1容易；
边框：1px实心#ccc；
光标：指针；
}
h1：悬停{
显示：内联块；
-webkit转换来源：60%40%；
-webkit变换：旋转（-10度）；
}

这是文本

旋转文本时，标准变换原点位于中心

这意味着文本的右侧部分越来越靠近查看者，因此被放大

通过一点实验，您可以获得类似的效果，将变换原点设置为右侧（使所有文本都远离），然后增加字体大小

也就是说，正确的字母将以更大的字体呈现，并且不会放大，从而使字体模糊程度降低，但大小相同

h1{
变换：透视（150px）旋转（-45度）；宽度：150px；
背景：黄色；
}
#试验{
变换：透视（150px）旋转（-30度）；
变换原点：右中心；
字号：4em；
宽度：325px；
边际：0px；
}

这是文本
这是文本

，我觉得不错。模糊的最后一个字母，但你会期待，当放大显着。截图？你在哪个浏览器上？@henry就像你说的，效果在最后一个字母上最明显。如果你看到了，你就看到了我所说的效果。10度旋转不是问题。我在做45度旋转。我尝试在父元素上添加透视图，但是旋转都搞砸了-可能我就是不明白它是如何工作的。@Pickle看我的第二个示例You代码示例在这里似乎有效，但在我尝试复制它时无效。在任何情况下，像素化（或者更确切地说，模糊度和明显缺乏锯齿）仍然会出现。我现在在想这就是事情的现状。我希望有一种方法可以强制浏览器对绘制文本的网格进行变形，但现在看来所能做的就是在绘制文本后对网格进行变形。谢谢你的努力。