A sass polyfill that adds support for 2D transform in IE 6 / 8

readMe.md

Sassy transforms

a IE polyfill for 2D transforms

inspired by: http://www.useragentman.com/IETransformsTranslator/

Support every major browser, even IE6

---

Usage

@include transform(widthOfDiv, heightOfDiv, function(value))

For example

div{
  width: 300px;
	height: 220px;
	@include transform(300px,220px, scale(1.4 1), skew(20deg), rotate(44deg));
}

---

special thanks to Adam Savitzky for the power, factorial, sin and cos functions in the css3-please-for-sass gist

Sassy-Transforms.scss

$pi: 3.14159265359;

@function power ($x, $n){
	$ret: 1;
	@if $n >= 0 {
		@for $i from 1 through $n {
			$ret: $ret * $x;
		} 
	} @else {
		@for $i from $n through 0 {
			$ret: $ret / $x;
		} }
	@return $ret;
}

@function factorial ($x){
	$ret: 1;
	@if $x > 0 {
		@while $x > 0 {
			$ret: $ret * $x;
			$x: $x - 1;
		}
	} @else {
		$ret: 1; }
	@return $ret;
}

@function sin ($x){
	$ret: 0;
	@for $n from 0 to 25 {
		$ret: $ret + power(-1, $n) * power($x, 2 * $n + 1) / factorial(2 * $n + 1); }
	@return $ret;
}

@function cos ($x){
	$ret: 0;
	@for $n from 0 to 25 {
		$ret: $ret + power(-1, $n) * power($x, 2 * $n) / factorial(2 * $n); }
	@return $ret;
}

@function tan($x){$ret: sin($x) / cos($x); @return $ret;}

@function deg-to-rad($x){$x: $x * $pi / 180; @return $x;}
@function strip-units($number){@return $number / ($number * 0 + 1);}

@function rotate($value){@return rotate $value;}
@function scale($value){@return scale $value;}
@function scaleX($value){@return scaleX $value;}
@function scaleY($value){@return scaleY $value;}
@function skew($value){@return skew $value;}
@function skewX($value){@return skewX $value;}
@function skewY($value){@return skewY $value;}
@function translate($value){@return translate $value;}
@function translateX($value){@return translateX $value;}
@function translateY($value){@return translateY $value;}
@function matrix($value){@return matrix $value;}

@mixin transform($width, $height, $values...){
	$somM11: 0;	$somM12: 0;	$somM21: 0;	$somM22: 0;
	$savM11: 1;	$savM12: 0;	$savM21: 0;	$savM22: 1;	$savDx: 0;	$savDy: 0;
	$resM11: 1;	$resM12: 0;	$resM21: 0;	$resM22: 1;
	$css3: ();

	@each $value in $values{
		@if nth($value, 1) == matrix{
			$somM11: nth($value, 2);
			$somM12: nth($value, 4);
			$somM21: nth($value, 3);
			$somM22: nth($value, 5);
			$savDx: $savDx + nth($value, 6);
			$savDy: $savDy + nth($value, 7);
			$css3: append($css3, unquote("matrix(#{nth($value, 2)}, #{nth($value, 3)}, #{nth($value, 4)}, #{nth($value, 5)}, #{nth($value, 6)}, #{nth($value, 7)})"));
		}@else if nth($value, 1) == skew{
			@if length($value) == 3{
				$somM21: tan(deg-to-rad(strip-units(nth($value, 3))));
				$css3: append($css3, unquote("skew(#{nth($value, 2)}, #{nth($value, 3)})"));
			} @else {
				$somM21: 0;
				$css3: append($css3, unquote("skew(#{nth($value, 2)})"));
			}
			$somM11: 1;
			$somM12: tan(deg-to-rad(strip-units(nth($value, 2))));
			$somM22: 1;
		}@else if nth($value, 1) == scale{
			@if length($value) == 3{
				$somM11: nth($value, 2);
				$somM22: nth($value, 3);
				$css3: append($css3, unquote("scale(#{nth($value, 2)}, #{nth($value, 3)})"));
			} @else {
				$somM11: nth($value, 2);
				$somM22: nth($value, 2);
				$css3: append($css3, unquote("scale(#{nth($value, 2)})"));
			}
			$somM12: 0;
			$somM21: 0;
		}@else if nth($value, 1) == translate{
			$somM11: 1;
			$somM12: 0;
			$somM21: 0;
			$somM22: 1;
			@if length($value) == 3{
				$savDx: $savDx + strip-units(nth($value, 2));
				$savDy: $savDy + strip-units(nth($value, 3));
				$css3: append($css3, unquote("translate(#{nth($value, 2)}, #{nth($value, 3)})"));
			} @else {
				$savDx: $savDx + nth($value, 2);
				$css3: append($css3, unquote("translate(#{nth($value, 2)})"));
			}
		}@else if nth($value, 1) == rotate{
			$css3: append($css3, unquote("rotate(#{nth($value, 2)})"));
			$rotate: strip-units(nth($value, 2));
			$somM11: cos(deg-to-rad($rotate));
			$somM12: sin(deg-to-rad($rotate)) * (-1);
			$somM21: sin(deg-to-rad($rotate));
			$somM22: cos(deg-to-rad($rotate));
		}@else if nth($value, 1) == skewX{
			$somM11: 1;
			$somM12: tan(deg-to-rad(strip-units(nth($value, 2))));
			$somM21: 0;
			$somM22: 1;
			$css3: append($css3, unquote("skewX(#{nth($value, 2)})"));
		}@else if nth($value, 1) == skewY{
			$somM11: 1;
			$somM12: 0;
			$somM21: tan(deg-to-rad(strip-units(nth($value, 2))));
			$somM22: 1;
			$css3: append($css3, unquote("skewY(#{nth($value, 2)})"));
		}@else if nth($value, 1) == scaleX{
			$somM11: nth($value, 2);
			$somM12: 0;
			$somM21: 0;
			$somM22: 1;
			$css3: append($css3, unquote("scaleX(#{nth($value, 2)})"));
		}@else if nth($value, 1) == scaleY{
			$somM11: 1;
			$somM12: 0;
			$somM21: 0;
			$somM22: nth($value, 2);
			$css3: append($css3, unquote("scaleY(#{nth($value, 2)})"));
		}@else if nth($value, 1) == translateX{
			$somM11: 1;
			$somM12: 0;
			$somM21: 0;
			$somM22: 1;
			$savDx: $savDx + strip-units(nth($value, 2));
			$css3: append($css3, unquote("translateX(#{nth($value, 2)})"));
		}@else if nth($value, 1) == translateY{
			$somM11: 1;
			$somM12: 0;
			$somM21: 0;
			$somM22: 1;
			$savDy: $savDy + strip-units(nth($value, 2));
			$css3: append($css3, unquote("translateY(#{nth($value, 2)})"));
		}

		@if nth($value, 1) != scale{
			$resM11: $somM11*$savM11+$somM21*$savM12;
			$resM12: $somM12*$savM11+$somM11*$savM12;
			$resM21: $somM21*$savM22+$somM22*$savM21;
			$resM22: $somM22*$savM22+$somM12*$savM21;
		} @else {
			$resM11: $savM11*$somM11;
			$resM12: $savM12*$somM22;
			$resM21: $savM21*$somM11;
			$resM22: $savM22*$somM22;
		}
		$savM11: $resM11;
		$savM12: $resM12;
		$savM21: $resM21;
		$savM22: $resM22;
	}
	@if $css3 != (){
		-webkit-transform: $css3;
		-ms-transform: $css3;
		transform: $css3;
	}
	@media \0screen\,screen\9 {
		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=#{$resM11}, M12=#{$resM12}, M21=#{$resM21}, M22=#{$resM22}, SizingMethod='auto expand')";
		filter: progid:DXImageTransform.Microsoft.Matrix( M11=#{$resM11}, M12=#{$resM12}, M21=#{$resM21}, M22=#{$resM22}, SizingMethod='auto expand');
		position: relative;
		left: ((($height*$resM12+$width*$resM11)-$width)/2-$savDx) * -1;
		top: ((($width*$resM21+$height*$resM22)-$height)/2-$savDy) * -1;
	}
}