Cross Browser CSS Rotation Sass Mixin

#css3

#scss

#transform

#filter

#sass

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

Mixin

 @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);
}

Related protips

Change the Bootstrap NavBar Breakpoint

500.1K

How to make a circular image with CSS only

244.2K

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 ·