带有平滑文本的 css3 透视图

问题描述

其实我的问题很简单。

我有一个带有文本的 3d 容器，如下所示：

.container{
    transform: perspective(120px) rotateY(45deg);
}

<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod,quis debitis odio facere 
voluptate <br>  expedita non vel,accusamus eos,autem ipsam. Quis,in necessitatibus quod 
assumenda accusamus <br>  asperiores deleniti sint!
</div>

但是正如您所看到的，文本质量非常低。我该如何解决？

我已经试过了，但不幸的是它没有用：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

解决方法

增加字体大小将有助于像素化。但是你必须相应地调整旋转度

.container{
    transform: perspective(120px) rotateY(15deg);
    font-size: 4em;
}

<div class="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod,quis debitis odio facere voluptate <br>  expedita non vel,accusamus eos,autem ipsam. Quis,in necessitatibus quod 
assumenda accusamus <br>  asperiores deleniti sint!
</div>