Differences between the CSS Transform Module Level 2 spec

[pc035860]

Hi, nice plugin! This is exactly the plugin I need to replace all my Compass code (e.g. @include rotate).

I found the current transformation doesn't really match the spec CSS Transform Module Level 2.

rotate

The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around, specified as the X, Y, and Z lengths of an origin-anchored vector. If the axis is unspecified, it defaults to 0 0 1, causing a "2d rotation" in the plane of the screen.

The rotate property doesn't apply any transform right now, due to

.foo {
    rotate: 100deg;
}

/* current version of plugin */
.foo {
    /**
     * this is actully not the correct transform, see the rotate3d spec on MDN: 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
     *
     * syntax should be: rotate3d(x, y, z, a)
     */
    transform: rotate3d(100deg, 0, 1);
}

/* spec */
.foo {
    transform: rotate3d(0, 0, 1, 100deg);
}

And one more question: Should the transform stays 2D when user doesn't mean to apply a 3D transform ?

Sine some browsers (like Chrome) would apply GPU Rasterization for 3D transforms, it would be better to give the user full control of it.

/* given rotate: 100deg */

/* 3D transform*/
.foo {
    transform: rotate3d(0, 0, 1, 100deg);
}

/* 2D transform */
.foo {
    transform: rotate(100deg);
}