rotate-element.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. // rotates an element vertically using a css3 transform
  2. @mixin rotate-element(
  3. $angle, // angle of rotation (90, 180, or 270)
  4. $include-ie: $include-ie,
  5. $background-color: null, // bg color to use for ms chroma filter
  6. $origin: null
  7. ) {
  8. $rotation-origin: null;
  9. $rotation: rotate(#{$angle}deg);
  10. $ie-rotation: null;
  11. @if $angle == 90 {
  12. $ie-rotation: 1;
  13. $rotation-origin: 0 0;
  14. } @else if $angle == 180 {
  15. $rotation-origin: 50% 50%;
  16. $ie-rotation: 2;
  17. } @else if $angle == 270 {
  18. $ie-rotation: 3;
  19. $rotation-origin: 100% 0;
  20. }
  21. @if not is-null($origin) {
  22. $rotation-origin: $origin;
  23. }
  24. -webkit-transform: $rotation;
  25. -webkit-transform-origin: $rotation-origin;
  26. -moz-transform: $rotation;
  27. -moz-transform-origin: $rotation-origin;
  28. -ms-transform: $rotation;
  29. -ms-transform-origin: $rotation-origin;
  30. transform: $rotation;
  31. transform-origin: $rotation-origin;
  32. @if $include-ie {
  33. // In IE8 we have to use a BasicImage filter to achieve 90 or 270 degree
  34. // rotation of the text container. Text rotated using this methodology does
  35. // not display using ClearType font unless the element has a background. To
  36. // work around this, we apply a background color to the text container element
  37. // and then use a Chroma filter to display all pixels of that color as transparent.
  38. .#{$prefix}ie8 & {
  39. @if not is-null($background-color) {
  40. background-color: $background-color;
  41. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$ie-rotation}),progid:DXImageTransform.Microsoft.Chroma(color=#{$background-color})";
  42. } @else {
  43. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$ie-rotation})";
  44. }
  45. }
  46. }
  47. }
  48. @mixin unrotate-element() {
  49. -webkit-transform: none;
  50. -moz-transform: none;
  51. -o-transform: none;
  52. transform: none;
  53. @if $include-ie {
  54. background-color: transparent;
  55. filter: none;
  56. }
  57. }