// rotates an element vertically using a css3 transform @mixin rotate-element( $angle, // angle of rotation (90, 180, or 270) $include-ie: $include-ie, $background-color: null, // bg color to use for ms chroma filter $origin: null ) { $rotation-origin: null; $rotation: rotate(#{$angle}deg); $ie-rotation: null; @if $angle == 90 { $ie-rotation: 1; $rotation-origin: 0 0; } @else if $angle == 180 { $rotation-origin: 50% 50%; $ie-rotation: 2; } @else if $angle == 270 { $ie-rotation: 3; $rotation-origin: 100% 0; } @if not is-null($origin) { $rotation-origin: $origin; } -webkit-transform: $rotation; -webkit-transform-origin: $rotation-origin; -moz-transform: $rotation; -moz-transform-origin: $rotation-origin; -ms-transform: $rotation; -ms-transform-origin: $rotation-origin; transform: $rotation; transform-origin: $rotation-origin; @if $include-ie { // In IE8 we have to use a BasicImage filter to achieve 90 or 270 degree // rotation of the text container. Text rotated using this methodology does // not display using ClearType font unless the element has a background. To // work around this, we apply a background color to the text container element // and then use a Chroma filter to display all pixels of that color as transparent. .#{$prefix}ie8 & { @if not is-null($background-color) { background-color: $background-color; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$ie-rotation}),progid:DXImageTransform.Microsoft.Chroma(color=#{$background-color})"; } @else { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$ie-rotation})"; } } } } @mixin unrotate-element() { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; @if $include-ie { background-color: transparent; filter: none; } }