Advanced Search

Crossbrowser Rotation

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // css
  2. .rotate {
  3.    -moz-transform: rotate(-30deg);
  4.      -o-transform: rotate(-30deg);
  5. -webkit-transform: rotate(-30deg);
  6.            filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154);
  7.        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154)";
  8.              zoom: 1;
  9. }
  10.  
  11. // sass
  12. @mixin rotate($degrees) {
  13.    -moz-transform: rotate($degrees);  
  14.      -o-transform: rotate($degrees);  
  15. -webkit-transform: rotate($degrees);
  16.            filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
  17.        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
  18.              zoom: 1;
  19. }
  20.  
  21. .rotate {
  22.   @include rotate(-30deg);
  23. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.