IE9 does not support rotateZ syntax for -ms-transform: rotate

[ShaunaGordon]

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.

[nschonni]

I think the -ms should be removed from here https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_transform.scss#L107. IE9 is prefixed and 2D only, IE10 is 2d & 3d with no prefixes.