Last Updated: February 25, 2016
·
452
· mattcodez

Text rotate in SCSS with IE8+

Rotate text in all browsers down to IE8. You only have to change one variable thanks to SCSS.

$rotateDeg: -10;
$rotateRad: $rotateDeg * (3.14159 / 180);

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=#{$rotateRad}, M12=#{$rotateRad * -1}, M21=#{$rotateRad}, M22=#{$rotateRad})"; /* IE8 */
-moz-transform: rotate(#{$rotateDeg}deg);  /* FF3.5/3.6 */
-o-transform: rotate(#{$rotateDeg}deg);  /* Opera 10.5 */
-webkit-transform: rotate(#{$rotateDeg}deg);  /* Saf3.1+ */
transform: rotate(#{$rotateDeg}deg);  /* Newer browsers (incl IE9) */

Thanks to SO for the IE8 code: http://stackoverflow.com/a/4617511/119909