Search code examples
csscss-transformsrotatetransform

CSS Rotate Transform Blurs Text

I am rotating a div a small amount, but want the text inside to be straight.

I have used the following...

.content {
  padding:20px;
  background:#F9ECDA;
  transform:rotate(-2deg);
  -ms-transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  -webkit-backface-visibility: hidden;
}

.contentinner {
  transform:rotate(2deg);
  -ms-transform:rotate(2deg);
  -webkit-transform:rotate(2deg);
}

Note that I have used -webkit-backface-visibility: hidden; to combat the Anti Aliasing issues (jagged edges) i was experiencing in Chrome. The problem with this, is that it blurs all of my text.

Take a look at this in Chrome... http://jsfiddle.net/Collins405/a9qnmp5k/

Is there any tricks to stop the text blurring?

I considered making the background div a psuedo :before, but as its in Drupal, the content will need to adjust the height depending on how much content my client enters, and a :before element wont do that.

EDIT: Also happening in Opera, but pretty good in FF

Solution

  • use -webkit-backface-visibility: hidden; also in .contentinner