How to remove blur when using translateZ?

Question

css

I'm using translateZ for the text, but the text is blurry. https://codepen.io/kirill778/pen/MWaeqaQ
It is important that when rotating, the text should also be in 3d, and not on the picture itself (background). Maybe you can replace translateZ or remove blur?

Answer 1

Helped inserting a picture through png

Answer 2

Try using SVG and its transformations and IMPORTANT, don't use a text style, use paths instead.
How? In the graph editor you type the text, choose the font, other parameters → convert it to curves (parse it), export it.
Why? There is always a chance to fall in love with a font.
However, you can try for the sake of dynamic content.