3

I've been trying to apply a transform rule to some elements which also have a @font-face font applied to them.

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

When this transform rule is applied, I get the rotation I'm after, but the text does not appear correctly — although it's rotated, it's as though each character is bound to an origin which sits on a pixel, and so the line of text looks jagged.

If I simply replace the font with a system font, the problem goes away, so would appear to be related to the use of @font-face. I've tested it in a variety of browsers on OS X and Windows, and they all show similar results.

Has anybody come across this problem before, or can anybody give any advice on why this might be occurring?

Phil Powell
  • 424
  • 2
  • 5

2 Answers2

0

Add these styles to <h1> element:

-webkit-backface-vivbility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
Jens Erat
  • 37,523
  • 16
  • 80
  • 96
gregmatys
  • 2,151
  • 18
  • 19
  • 1) typo: webkit-backface-visibility 2) -webkit-transform: translate3d(0,0,0); after -webkit-transform: rotate(-1deg); will overwrite the original... Just adding -webkit-transform-style: preserve-3d to the original did the trick for me. – squarecandy Feb 19 '13 at 04:13
0

Check out the source for this experiment.

It uses @font-face with rotate as well as some other nifty CSS3 effects.

Josiah
  • 1,117
  • 5
  • 22
  • 35