0

I have a very simple transform on div element. Inside of it is few lines of text. Text renders fine on Firefox and IE, but it is not looking good in Chrome. I tried changing -webkit-font-smoothing, but that didn't help either.

.text-holder{position: absolute;top: 0;width: 30rem;height: 20rem;margin-right:   auto;margin-left: auto;left: 0;right: 0;-webkit-transform:rotate(-4.6deg);-moz-   transform:rotate(-4.6deg); transform: rotate(-4.6deg);}

Here is the fiddle: http://jsfiddle.net/FFA6b/

fluxus
  • 559
  • 5
  • 15
  • 29

1 Answers1

2

It's difficult to explain why, but adding perspective solves the issue:

-webkit-transform: perspective(999px) rotate(-4.6deg);

fiddle

vals
  • 61,425
  • 11
  • 89
  • 138