Blurry text on transform:rotate in Chrome

Question

I\'m building a website with a wrapper div that is rotated (transform:rotate(10deg)). The text inside the div also rotates. I want the text straight, so I rotat

Answer 1

For anyone who is still running into this issue, despite having tried the previous suggestions:

I have found that if you put a perspective property on the parent element being rotated, it completely fixes the issue. The value can be anything above 0, assuming you're not using any 3d transforms.

Example CSS:

.parent {
    transform: rotate(10deg);
    perspective: 100px;
}

.child {
    transform: rotate(-10deg);
}

Answer 2

It happens in Webkit browsers such as Chrome and Safari. Try adding:

-webkit-transform-origin: 50%  51%;

and you would be fine.

Answer 3

This worked for me.

zoom: 1.005;

Hope this helps you too.

This will make your content a little bit big but the blur problem will be solved. Hope this was helpful for you.

Answer 4

I used transform:rotateY(180deg) and my text was blurry. I replaced it with transform: scale(-1, 1) and it worked for me.

Answer 5

It could happen if your point of rotation falls between pixels. To avoid it you can try to move the origin a bit or make sure the element being rotated has odd dimensions.

Answer 6

try adding and check if this works (as a hack):

transform: translateZ(0);