Transform rotate and negative rotate value on text makes the text become blurry

[toolman]

Hi there,

I have a div with some text inside.

I have applied a transform: rotate(20deg); to the parent box and then a transform: rotate(-20deg); on the p tag holding the text to have the box angled and the text straight. This works fine, however the text now appears to be blurred, even though it is straight.

Does anyone know why this is? Maybe it is just a browser rendering issue? Or is there another way to do the same thing without transform?

Many thanks!

[SamA74]

@toolman

Or is there another way to do the same thing without transform?

Apply the transform to a pseudo element for the visible box, the actual container can have no background and remain unmoved.

[toolman]

Awesome Many thanks, that is perfect