Applying rotate CSS transform to an element using @ font-face

Question

I am trying to apply a transform rule to some elements that also have a font @font-faceapplied to them.

h1 {
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

When this conversion rule is applied, I get a rotation that I follow, but the text does not display correctly - although it rotates as if each character is attached to a place of origin that is on a pixel, and therefore the line of text looks uneven.

If I just replace the font with a system font, the problem will disappear, so it seems to be related to use @font-face. I tested it in various browsers on OS X and Windows, and they all show similar results.

Has anyone encountered this problem before, or can anyone give any advice on why this might happen?

Answer 1

Check out the source of this.

It uses @ font-face with rotation, as well as some other great CSS3 effects.

Answer 2

Add these styles to the element <h1>:

-webkit-backface-vivbility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;