Posted By

viatropos on 08/12/10


Tagged

css html browser stylesheet rotation transform SASS cross scss


Versions (?)

Cross Browser CSS Rotation with and without Sass


 / Published in: CSS
 

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

  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  

You need to login to post a comment.