The first green block shows how jagged mis-spaced text that happens when using CSS3 transforms in Firefox, Chrome and Safari. The effect is more pronounced in Windows. If you mouse of the the text, you will notice that this effect goes away until the animation stops. The second green block fixes this issue when the transform begins with perspective(1px). The third uses another fix using -webkit-backface-visibility: hidden; for Chrome and Safari and SVG Filters for Firefox.
Read to User Agent Man article for a full explanation.

rotate(-30deg)	perspective(1px) rotate(-30deg)	rotate(-30deg) with SVG filter
This DOM elements' text is not smooth. In Firefox and WebKit/Blink based browsers, the text here is very jumpy until you start an animation. However, about a second after the animation is completed, the text becomes jumpy again if the container is transformed.	This DOM elements' text is smooth. In order to implement the fix, we start the transform with `perspective(1px)`, which works for all affected browsers.	This DOM elements' text is smooth as well, but there is also a fix for the jagged border that appears in the second example in Firefox. To implement this fix, we set `-webkit-backface-visibility: hidden;`(for Chrome, Safari and other WebKit/Blink based browsers) and `filter:` to a SVG blur filter of 0 (for Firefox).

rotate(-30deg)

perspective(1px) rotate(-30deg)

rotate(-30deg) with SVG filter

This DOM elements' text is not smooth. In Firefox and WebKit/Blink based browsers, the text here is very jumpy until you start an animation. However, about a second after the animation is completed, the text becomes jumpy again if the container is transformed.

This DOM elements' text is smooth. In order to implement the fix, we start the transform with perspective(1px), which works for all affected browsers.

This DOM elements' text is smooth as well, but there is also a fix for the jagged border that appears in the second example in Firefox. To implement this fix, we set -webkit-backface-visibility: hidden;(for Chrome, Safari and other WebKit/Blink based browsers) and filter: to a SVG blur filter of 0 (for Firefox).