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);
}