css3 perspective with smooth text

user_12494257 0
Viewed 51

my problem is quite simple actually.

i have 3d-container with text in it, like this:

.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>

but as you can see, text quality is so low. how can i fix that?

i already tried this but it didn't work unfortunately:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
perspective css html
1 Answers

Increasing the font-size would help with the pixelation. But you will have to adjust the rotation degree accordingly 

.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>

user_89196730
Related