CSS: Heavily aliased 3d-rotated text

Question

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):

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>

Could you put your code into your question (so your question is useful for future readers when your codepen disappears). — A Haworth, Mar 17 '23 at 10:22
I tried a couple of these without any success, but you might be able to find something useful in here: [css transform, jagged edges in chrome](https://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome) — DBS, Mar 17 '23 at 13:24

score 0 · Answer 1 · answered Mar 17 '23 at 12:47

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

answered Mar 17 '23 at 12:47

Thomas W

32
5

score 0 · Answer 2 · answered Mar 17 '23 at 13:07

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>

CSS: Heavily aliased 3d-rotated text

Code from codepen for future reference

2 Answers2