Skip to content

Instantly share code, notes, and snippets.

@adamcbrewer

adamcbrewer/typo-transforms.css

Created May 22, 2014 09:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamcbrewer/cc714b03012b5166bc5d to your computer and use it in GitHub Desktop.
Save adamcbrewer/cc714b03012b5166bc5d to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Fixing Typography Inside of CSS 2D Transforms
Raw
typo-transforms.css
/* This should hopefully fix crappy typography inside of rotated elements.
Taken from http://flippinawesome.org/2014/05/21/fixing-typography-inside-of-css-2-d-transforms/ */
.rotated-typography {
transform: perspective(1px) rotate(-10deg);
/* Using `translateZ(0)` forces GPU rendering (and only fixes -webkit), but `perspective(1px)` does the job nicely. */
/* Don't use -ms prefix, however, as Presto engine in IE9 lacks 3D transform support. */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment