Last Updated: February 25, 2016
· fabricelejeune

Cross Browser CSS Rotation Sass Mixin

Here a Sass mixin that enable rotation even on old browser.


 @mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -moz-transform: rotate($degrees);
    -ms-transform: rotate($degrees);
    -o-transform: rotate($degrees);
    transform: rotate($degrees);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});

How to use

 .rotate {
    @include rotate(-45deg);

Compile code

 .rotate {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.70711, M12=0.70711, M21=-0.70711, M22=0.70711)";
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.70711, M12=0.70711, M21=-0.70711, M22=0.70711);

2 Responses
Add your response

I've been trying to find the correlation between degrees in CSS3 and the M variables in the IE transform filters. Would the cosign and sine functions used here to interpret them pretty accurately for other transformations such as skew( $degreeX , $degreeY )?

Update: Did a little research and something like this ended up working for me (as far as skewing a shape in IE) goes;

$M11 : 1; $M12 : sin( $degreeX ); $M21 : sin( $degreeY ); $M22 : 1;

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=#{$M11}, M12=-#{$M12}, M21=-#{$M21}, M22=#{$M22}, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=#{$M11}, M12=-#{$M12}, M21=-#{$M21}, M22=#{$M22}, SizingMethod='auto expand');

over 1 year ago ·

It would be much better to make a self generating mixin based on class name.

ex. rotate-33 would rotate 33 degrees

I am currently researching if this is even possible

over 1 year ago ·