Jagged text issue while using rotation webkit

Question

Any ideas on how to make the text appear 'inline'?

I made a polaroid photo effect on my portfolio, the rotate completely ruins the font, unsure if there is a fix.

rest assured, it's not so bad with my current font but other fonts look awful.

Code:

figure.polaroid {
width: 221px;
height: 240px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
background-color: white;
padding: 10px;
box-shadow: 1px 2px 10px black;
margin-top: 25px;
border-radius: 5px;
}

Answer 1

Let me guess, Chrome?

Try -webkit-backface-visibility: hidden;

I've read that some people avoid this issue by applying a 3d transform for rotation, such as transform: rotate3d(1, 2.0, 3.0, 10deg), so that might be a cleaner solution.