Description
Per the MSDN, IE9 supports -ms-transform: rotate(deg); (2D transformation), but simple-transform outputs -ms-transform: rotateZ(deg); (3D transformation), which isn't supported by IE9.
I'm not sure exactly where this syntax is getting picked up/determined, but I was able to get the correct transform output by extending simple-transform with the following mixin:
@mixin ie-transform(
$scale: false,
$rotate: false,
$trans-x: false,
$trans-y: false,
$skew-x: false,
$skew-y: false,
$origin-x: false,
$origin-y: false
) {
$trans: unquote("");
@if $scale { $trans: $trans scale($scale) }
@if $rotate { $trans: $trans rotate($rotate) }
@if $trans-x { $trans: $trans transX($trans-x) }
@if $trans-y { $trans: $trans transY($trans-y) }
@if $skew-x { $trans: $trans skewX($skew-x) }
@if $skew-y { $trans: $trans skewY($skew-y) }
@include experimental(transform, $trans, $moz: false, $webkit: false, $o: false, $khtml: false, $official: false, $ms: -ms);
@include simple-transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y, $origin-x, $origin-y);
}This works by aggregating the transformations the same way create-transform does, but uses rotate() instead of working out rotateZ, then calling @include experimental directly, instead of working up the chain, and adding an extra -ms-transform line before the default simple-transform output. This allows for versions of IE that support rotateZ (IE10+) to use the 3D transform syntax.
While the above workaround works (at least well enough for my purposes), it seems to me like a bug that it isn't included in the base transformations, or that simple-transform is using 3D transformation syntax at all, when the parameter list is limited to X and Y.