Cross Browser CSS Rotation with and without Sass


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



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. }

URL: cross-browser-css-rotation-with-and-without-sass

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.