Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Cross Browser CSS Rotation With And Without Sass

DZone's Guide to

Cross Browser CSS Rotation With And Without Sass

·
Free Resource
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);
}
Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}