Over a million developers have joined DZone.

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)
  def cos(angle)
    Sass::Script::Parser.parse(Math.cos(angle.value).to_s, 0, 0)

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

Opinions expressed by DZone contributors are their own.


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.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}