DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Lance has posted 24 posts at DZone. View Full User Profile

Cross Browser CSS Rotation With And Without Sass

08.11.2010
| 7036 views |
  • submit to reddit
        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);
}