Cross Browser CSS Rotation with and without Sass

Thursday, 12 August 2010 02:11

expand-rotate$degrees-filter-zoom--o-transform

First, you have to add this to Sass:

# http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

# http://www.seancolombo.com/2010/07/28/how-to-make-and-use-a-custom-sass-function/

# http://sass-lang.com/docs/yardoc/Sass/Script/Literal.html

# math_sass.rb

require 'sass'



module Sass::Script::Functions

  def sin(angle)

    Sass::Script::Parser.parse(Math.sin(angle.value).to_s, 0, 0)

  end

  def cos(angle)

    Sass::Script::Parser.parse(Math.cos(angle.value).to_s, 0, 0)

  end

end

Include that with sass by running this (where 'stylesheets' is the directory containing your stylesheets):

sass --watch stylesheets:stylesheets -r math_sass.rb

Then you can use the sine and cosine functions no problem.

// 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);

}