Return to Snippet

Revision: 30545
at August 17, 2010 04:04 by kopeo


Initial Code
// css
.rotate {
   -moz-transform: rotate(-30deg);
     -o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154);
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154)";
             zoom: 1;
}

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

.rotate {
  @include rotate(-30deg);
}

Initial URL


Initial Description


Initial Title
Crossbrowser Rotation

Initial Tags
CSS3

Initial Language
CSS