Question 43889 in Html Question posted in
Some basic documentation can be found here.

CSS: Heavily aliased 3d-rotated text – Html

Please take a look at this Codepen.

The more the text gets in the background, the more aliasing occurs.

Screenshot, taken in chrome on macOS (looks the same in FF & Safari):

heavy aliasing occurring on css 3d-rotated text

I’ve tried different values for -webkit-font-smoothing and text-rendering, slapped translate3d(0,0,0) around and some more strange voodoo. Nothing makes for a nice result. With a little filter: blur I can cover up the problem, obviously sacrificing sharpness.

Is this an inevitability of life (because displays have pixels), or can something be done about it?

🙏

Code from codepen for future reference
body {
  background: black;
  text-align: center;
}

div {
  perspective: 1000px;
}

h1 {
  color: white;
  font-weight: 300;
  font-size: 6vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg);
}
html
<div>
  <h1>🤗 Hello World!</h1>
</div>
Tags:

2

Answers


  1. 0

    I think this is just how browsers render it. If you really want to get rid of it, just try a completely different approach with another transformation. ://

    Login or Signup to reply.
  2. 0

    This is the default behaviour of the browser, you can only reduce the over sharpness by reducing the font size and scaling the text by transform. The more you scale it the more it smoothens until it becomes blur.

    body {
  background: black;
  text-align: center;
}
div {
  perspective: 1000px;
}
h1 {
  color: white;
  font-weight: 300;
  font-size: 5vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg) scale(4);
}
    <div>
  <h1>🤗 Hello World!</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search