Numerous small changes to the transform module.

frameworks/compass/stylesheets/compass/css3/_transform-v2.scss

@@ -1,5 +1,6 @@
 @import "shared";
 
+// @doc off
 // Note ----------------------------------------------------------------------
 // Safari is the only browser that currently supports 3D transforms.
 // Because of that it can be important to control whether a given 2D transform
@@ -44,6 +45,7 @@
 //  - shortcuts:  skewX, skewY
 
 // Defaults ------------------------------------------------------------------
+// @doc on
 
 // Transform Origin
 $default-origin-x    : 50%                   !default;
@@ -78,16 +80,14 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include apply-origin( origin [, 3D-only ] )
 //
-// where 'origin' is a string containing 1-3 (x/y/z) coordinates
+// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
 // in percentages, absolute (px, cm, in, em etc..) or relative
 // (left, top, right, bottom, center) units
 //
 // @param only3d Set this to true to only apply this
 // mixin where browsers have 3D support.
-@mixin apply-origin(
+@mixin apply-origin($origin, $only3d) {
-  $origin,
+  $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
-  $only3d: false
-) {
   @if $only3d {
     @include experimental(transform-origin, $origin,
       not -moz, -webkit, not -o, not -ms, not -khtml, official
@@ -99,50 +99,34 @@ $default-skew-y      : 5deg                  !default;
   }
 }
 
-// Transform-origin sent as individual arguments
+// Transform-origin sent as individual arguments:
-// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
+//
-// where the 3 'origin-' arguments represent x/y/z coordinates
+//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
-// ** setting z coordinates triggers 3D support list, leave false for 2D support
+//
+// where the 3 'origin-' arguments represent x/y/z coordinates.
+//
+// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
 @mixin transform-origin(
   $origin-x: $default-origin-x,
   $origin-y: $default-origin-y,
   $origin-z: false,
-  $only3d:   $origin-z
+  $only3d:   false
 ) {
   $origin: unquote('');
   @if $origin-x or $origin-y or $origin-z {
     @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
     @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
-    @if $origin-z { $origin: $origin $origin-z; $only3d: true; }
+    @if $origin-z { $origin: $origin $origin-z; }
     @include apply-origin($origin, $only3d);
   }
 }
 
-// Shortcut to target all browsers with 2D transform support
-// @include transform-origin( [ origin-x, origin-y ] )
-@mixin transform-origin2d(
-  $origin-x: $default-origin-x,
-  $origin-y: $default-origin-y
-) {
-  @include transform-origin($origin-x, $origin-y);
-}
 
-// Shortcut to target all browsers with 3D transform support
+// Transform sent as a complete string:
-// @include transform-origin( [ origin-x, origin-y, origin-z ] )
+//
-@mixin transform-origin3d(
+//     @include transform( transforms [, 3D-only ] )
-  $origin-x: $default-origin-x,
+//
-  $origin-y: $default-origin-y,
+// where 'transforms' is a space separated list of all the transforms to be applied
-  $origin-z: $default-origin-z
-) {
-  @include transform-origin($origin-x, $origin-y, $origin-z, true);
-}
-
-
-// Transform -----------------------------------------------------------------
-
-// Transform sent as a complete string
-// @include transform( transforms [, 3D-only ] )
-// where 'transforms' is a string of all the transforms to be applied
 @mixin transform(
   $transform,
   $only3d: false
@@ -171,8 +155,10 @@ $default-skew-y      : 5deg                  !default;
 
 // 3D Parameters -------------------------------------------------------------
 
-// Set the perspective of 3D transforms on the children of an element
+// Set the perspective of 3D transforms on the children of an element:
-// @include perspective( perspective )
+//
+//      @include perspective( perspective )
+//
 // where 'perspective' is a uniless number representing the depth of the z-axis
 // the higher the perspective, the more exagerated the foreshortening.
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
@@ -183,40 +169,41 @@ $default-skew-y      : 5deg                  !default;
 }
 
 // Set the origin position for the perspective
-// @include perspective-origin( [ origin-x, origin-y ] )
+//
+//      @include perspective-origin(origin-x [origin-y])
+//
 // where the two arguments represent x/y coordinates
-@mixin perspective-origin(
+@mixin perspective-origin($origin: 50%) {
-  $origin-x: 50%,
+  @include experimental(perspective-origin, $origin,
-  $origin-y: false
-) {
-  $po: $origin-x;
-  @if $origin-y { $po: $po $origin-y; }
-  @include experimental(perspective-origin, $po,
     not -moz, -webkit, not -o, not -ms, not -khtml, official
   );
 }
 
 // Determine whether a 3D objects children also live in the given 3D space
-// @include transform-style( [ style ] )
+//
-// where 'style' can be either 'flat' or 'preserves-3d'
+//      @include transform-style( [ style ] )
-// browsers default to flat, mixin defaults to preserves-3d
+//
-@mixin transform-style($ts: unquote("preserves-3d")) {
+// where `style` can be either `flat` or `preserves-3d`
-  @include experimental(perspective-origin, $ts,
+// browsers default to `flat`, mixin defaults to `preserves-3d`
+@mixin transform-style($style: preserves-3d) {
+  @include experimental(perspective-origin, $style,
     not -moz, -webkit, not -o, not -ms, not -khtml, official
   );
 }
 
 // Determine the visibility of an element when it's back is turned
+//
 // @include backface-visibility( [ visibility ] )
-// where 'visibility can be either 'visible' or 'hidden'
+//
+// where `visibility` can be either `visible` or `hidden`
 // browsers default to visible, mixin defaults to hidden
-@mixin backface-visibility($bv: unquote("hidden")) {
+@mixin backface-visibility($visibility: hidden) {
-  @include experimental(backface-visibility, $bv,
+  @include experimental(backface-visibility, $visibility,
     not -moz, -webkit, not -o, not -ms, not -khtml, official
   );
 }
 
-
+// @doc off
 // Transform Partials --------------------------------------------------------
 // These work well on their own, but they don't add to each other, they override.
 // Use along with transform parameter mixins to adjust origin, perspective and style
@@ -224,12 +211,17 @@ $default-skew-y      : 5deg                  !default;
 
 
 // Scale ---------------------------------------------------------------------
+// @doc on
 
-// Scale an object along the x and y axis
+// Scale an object along the x and y axis:
-// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
+//
+//      @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
+//
 // where the 'scale-' arguments are unitless multipliers of the x and y dimensions
 // and perspective, which works the same as the stand-alone perspective property/mixin
 // but applies to the individual element (multiplied with any parent perspective)
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin scale(
   $scale-x:     $default-scale-x,
   $scale-y:     $scale-x,
@@ -243,6 +235,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Scale an object along the x axis
 // @include scaleX( [ scale-x, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin scaleX(
   $scale:       $default-scale-x,
   $perspective: false,
@@ -255,6 +249,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Scale an object along the y axis
 // @include scaleY( [ scale-y, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin scaleY(
   $scale:       $default-scale-y,
   $perspective: false,
@@ -267,6 +263,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Scale an object along the z axis
 // @include scaleZ( [ scale-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin scaleZ(
   $scale: $default-scale-z,
   $perspective: false
@@ -278,6 +276,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Scale and object along all three axis
 // @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin scale3d(
   $scale-x:     $default-scale-x,
   $scale-y:     $default-scale-y,
@@ -289,12 +289,15 @@ $default-skew-y      : 5deg                  !default;
   @include transform3d($trans);
 }
 
-
+// @doc off
 // Rotate --------------------------------------------------------------------
+// @doc on
 
 // Rotate an object around the z axis  (2D)
 // @include rotate( [ rotation, perspective, 3D-only ] )
 // where 'rotation' is an angle set in degrees (deg) or radian (rad) units
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotate(
   $rotate:      $default-rotate,
   $perspective: false,
@@ -306,6 +309,8 @@ $default-skew-y      : 5deg                  !default;
 }
 
 // A longcut for 'rotate' in case you forget that 'z' is implied
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotateZ(
   $rotate:      $default-rotate,
   $perspective: false,
@@ -316,6 +321,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Rotate an object around the x axis (3D)
 // @include rotateX( [ rotation, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotateX(
   $rotate: $default-rotate,
   $perspective: false
@@ -327,6 +334,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Rotate an object around the y axis (3D)
 // @include rotate( [ rotation, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotateY(
   $rotate: $default-rotate,
   $perspective: false
@@ -341,6 +350,8 @@ $default-skew-y      : 5deg                  !default;
 // where the 'vector-' arguments accept unitless numbers
 // these numbers are not important on their own, but in relation to one another
 // creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotate3d(
   $vector-x: $default-vector-x,
   $vector-y: $default-vector-y,
@@ -353,12 +364,15 @@ $default-skew-y      : 5deg                  !default;
   @include transform3d($trans);
 }
 
-
+// @doc off
 // Translate -----------------------------------------------------------------
+// @doc on
 
 // Move an object along the x or y axis (2D)
 // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
 // where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin translate(
   $translate-x: $default-translate-x,
   $translate-y: $default-translate-y,
@@ -372,6 +386,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the x axis (2D)
 // @include translate( [ translate-x, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin translateX(
   $trans-x:     $default-translate-x,
   $perspective: false,
@@ -384,6 +400,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the y axis (2D)
 // @include translate( [ translate-y, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin translateY(
   $trans-y:     $default-translate-y,
   $perspective: false,
@@ -396,6 +414,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the z axis (3D)
 // @include translate( [ translate-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin translateZ(
   $trans-z:     $default-translate-z,
   $perspective: false
@@ -407,6 +427,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the x, y and z axis (3D)
 // @include translate( [ translate-x, translate-y, translate-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin translate3d(
   $translate-x: $default-translate-x,
   $translate-y: $default-translate-y,
@@ -424,6 +446,8 @@ $default-skew-y      : 5deg                  !default;
 // Skew an element
 // @include skew( [ skew-x, skew-y, 3D-only ] )
 // where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin skew(
   $skew-x: $default-skew-x,
   $skew-y: $default-skew-y,
@@ -435,6 +459,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Skew an element along the x axiz
 // @include skew( [ skew-x, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin skewX(
   $skew-x: $default-skew-x,
   $only3d: false
@@ -445,6 +471,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Skew an element along the y axis
 // @include skew( [ skew-y, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
 @mixin skewY(
   $skew-y: $default-skew-y,
   $only3d: false
@@ -454,16 +482,15 @@ $default-skew-y      : 5deg                  !default;
 }
 
 
-// Full transform mixins -----------------------------------------------------
+// Full transform mixins
 // For settings any combination of transforms as arguments
 // These are complex and not highly recommended for daily use
 // They are mainly here for backwards-compatability purposes
+//
 // * they include origin adjustments
 // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
-// ---------------------------------------------------------------------------
+//
-
+// **Note** This mixin cannot be combined with other transform mixins.
-
-// The full list of options
 @mixin create-transform(
   $perspective: false,
   $scale-x:     false,
@@ -539,7 +566,7 @@ $default-skew-y      : 5deg                  !default;
   $origin-x: false,
   $origin-y: false
 ) {
-  @include compact-transform(
+  @include create-transform(
     false,
     $scale, $scale, false,
     false, false, $rotate, false,

test/fixtures/stylesheets/compass/css/transform.css

@@ -0,0 +1,305 @@
+.apply-origin-2d {
+  -moz-transform-origin: 2px 5%;
+  -webkit-transform-origin: 2px 5%;
+  -o-transform-origin: 2px 5%;
+  transform-origin: 2px 5%; }
+
+.apply-origin-3d {
+  -webkit-transform-origin: 2px 5% 2in;
+  transform-origin: 2px 5% 2in; }
+
+.transform-origin-2d {
+  -moz-transform-origin: 100px 100px;
+  -webkit-transform-origin: 100px 100px;
+  -o-transform-origin: 100px 100px;
+  transform-origin: 100px 100px; }
+
+.transform-origin-3d {
+  -webkit-transform-origin: 100px 100px 100px;
+  transform-origin: 100px 100px 100px; }
+
+.transform-2d {
+  -moz-transform: rotateY(20deg);
+  -webkit-transform: rotateY(20deg);
+  -o-transform: rotateY(20deg);
+  transform: rotateY(20deg); }
+
+.transform-3d {
+  -webkit-transform: rotateZ(20deg);
+  transform: rotateZ(20deg); }
+
+.perspective {
+  -webkit-perspective: 500;
+  perspective: 500; }
+
+.perspective-origin {
+  -webkit-perspective-origin: 25% 25%;
+  perspective-origin: 25% 25%; }
+
+.transform-style {
+  -webkit-perspective-origin: preserves-3d;
+  perspective-origin: preserves-3d; }
+
+.backface-visibility {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden; }
+
+.scale {
+  -moz-transform: scale(30px, 50px);
+  -webkit-transform: scale(30px, 50px);
+  -o-transform: scale(30px, 50px);
+  transform: scale(30px, 50px); }
+
+.scale-3d {
+  -webkit-transform: scale(30px, 50px);
+  transform: scale(30px, 50px); }
+
+.scale-with-perspective {
+  -moz-transform: perspective(500) scale(30px, 50px);
+  -webkit-transform: perspective(500) scale(30px, 50px);
+  -o-transform: perspective(500) scale(30px, 50px);
+  transform: perspective(500) scale(30px, 50px); }
+
+.scale-3d-with-perspective {
+  -webkit-transform: perspective(500) scale(30px, 50px);
+  transform: perspective(500) scale(30px, 50px); }
+
+.scale-x {
+  -moz-transform: scaleX(30px);
+  -webkit-transform: scaleX(30px);
+  -o-transform: scaleX(30px);
+  transform: scaleX(30px); }
+
+.scale-x-3d {
+  -webkit-transform: scaleX(30px);
+  transform: scaleX(30px); }
+
+.scale-x-with-perspective {
+  -moz-transform: perspective(500) scaleX(30px);
+  -webkit-transform: perspective(500) scaleX(30px);
+  -o-transform: perspective(500) scaleX(30px);
+  transform: perspective(500) scaleX(30px); }
+
+.scale-x-3d-with-perspective {
+  -webkit-transform: perspective(500) scaleX(30px);
+  transform: perspective(500) scaleX(30px); }
+
+.scale-y {
+  -moz-transform: scaleY(50px);
+  -webkit-transform: scaleY(50px);
+  -o-transform: scaleY(50px);
+  transform: scaleY(50px); }
+
+.scale-y-3d {
+  -webkit-transform: scaleY(50px);
+  transform: scaleY(50px); }
+
+.scale-y-with-perspective {
+  -moz-transform: perspective(500) scaleY(50px);
+  -webkit-transform: perspective(500) scaleY(50px);
+  -o-transform: perspective(500) scaleY(50px);
+  transform: perspective(500) scaleY(50px); }
+
+.scale-y-3d-with-perspective {
+  -webkit-transform: perspective(500) scaleY(50px);
+  transform: perspective(500) scaleY(50px); }
+
+.scale-z {
+  -webkit-transform: scaleZ(50px);
+  transform: scaleZ(50px); }
+
+.scale-z-with-perspective {
+  -webkit-transform: perspective(500) scaleZ(50px);
+  transform: perspective(500) scaleZ(50px); }
+
+.scale3d {
+  -webkit-transform: scale3d(30px, 50px, 100px);
+  transform: scale3d(30px, 50px, 100px); }
+
+.scaled3-with-perspective {
+  -webkit-transform: perspective(500) scale3d(30px, 50px, 100px);
+  transform: perspective(500) scale3d(30px, 50px, 100px); }
+
+.rotate {
+  -moz-transform: perspective(500) rotate(25deg);
+  -webkit-transform: perspective(500) rotate(25deg);
+  -o-transform: perspective(500) rotate(25deg);
+  transform: perspective(500) rotate(25deg); }
+
+.rotate-with-perspective {
+  -moz-transform: perspective(500) rotate(25deg);
+  -webkit-transform: perspective(500) rotate(25deg);
+  -o-transform: perspective(500) rotate(25deg);
+  transform: perspective(500) rotate(25deg); }
+
+.rotate-z {
+  -moz-transform: rotate(25deg);
+  -webkit-transform: rotate(25deg);
+  -o-transform: rotate(25deg);
+  transform: rotate(25deg); }
+
+.rotate-z-with-perspective {
+  -moz-transform: perspective(500) rotate(25deg);
+  -webkit-transform: perspective(500) rotate(25deg);
+  -o-transform: perspective(500) rotate(25deg);
+  transform: perspective(500) rotate(25deg); }
+
+.rotate-x {
+  -webkit-transform: rotateX(25deg);
+  transform: rotateX(25deg); }
+
+.rotate-x-with-perspective {
+  -webkit-transform: perspective(500) rotateX(25deg);
+  transform: perspective(500) rotateX(25deg); }
+
+.rotate-y {
+  -webkit-transform: rotateY(25deg);
+  transform: rotateY(25deg); }
+
+.rotate-y-with-perspective {
+  -webkit-transform: perspective(500) rotateY(25deg);
+  transform: perspective(500) rotateY(25deg); }
+
+.rotate-3d {
+  -webkit-transform: rotate3d(5, 2, 1, 75deg);
+  transform: rotate3d(5, 2, 1, 75deg); }
+
+.rotate-3d-with-perspective {
+  -webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
+  transform: perspective(500) rotate3d(5, 2, 1, 75deg); }
+
+.translate {
+  -moz-transform: translate(20px, 30%);
+  -webkit-transform: translate(20px, 30%);
+  -o-transform: translate(20px, 30%);
+  transform: translate(20px, 30%); }
+
+.translate-with-perspective {
+  -moz-transform: perspective(500) translate(20px, 30%);
+  -webkit-transform: perspective(500) translate(20px, 30%);
+  -o-transform: perspective(500) translate(20px, 30%);
+  transform: perspective(500) translate(20px, 30%); }
+
+.translate-3d {
+  -webkit-transform: translate(20px, 30%);
+  transform: translate(20px, 30%); }
+
+.translate-3d-with-perspective {
+  -webkit-transform: perspective(500) translate(20px, 30%);
+  transform: perspective(500) translate(20px, 30%); }
+
+.translate-x {
+  -moz-transform: translateX(30px);
+  -webkit-transform: translateX(30px);
+  -o-transform: translateX(30px);
+  transform: translateX(30px); }
+
+.translate-x-3d {
+  -webkit-transform: translateX(30px);
+  transform: translateX(30px); }
+
+.translate-x-with-perspective {
+  -moz-transform: perspective(500) translateX(30px);
+  -webkit-transform: perspective(500) translateX(30px);
+  -o-transform: perspective(500) translateX(30px);
+  transform: perspective(500) translateX(30px); }
+
+.translate-x-3d-with-perspective {
+  -webkit-transform: perspective(500) translateX(30px);
+  transform: perspective(500) translateX(30px); }
+
+.translate-y {
+  -moz-transform: translateY(30px);
+  -webkit-transform: translateY(30px);
+  -o-transform: translateY(30px);
+  transform: translateY(30px); }
+
+.translate-y-3d {
+  -webkit-transform: translateY(30px);
+  transform: translateY(30px); }
+
+.translate-y-with-perspective {
+  -moz-transform: perspective(500) translateY(30px);
+  -webkit-transform: perspective(500) translateY(30px);
+  -o-transform: perspective(500) translateY(30px);
+  transform: perspective(500) translateY(30px); }
+
+.translate-y-3d-with-perspective {
+  -webkit-transform: perspective(500) translateY(30px);
+  transform: perspective(500) translateY(30px); }
+
+.translate-z {
+  -webkit-transform: translateZ(30px);
+  transform: translateZ(30px); }
+
+.translate-z-with-perspective {
+  -webkit-transform: perspective(500) translateZ(30px);
+  transform: perspective(500) translateZ(30px); }
+
+.translate-3d {
+  -webkit-transform: translate3d(30px, 50px, 75px);
+  transform: translate3d(30px, 50px, 75px); }
+
+.translate-3d-with-perspective {
+  -webkit-transform: perspective(500) translate3d(30px, 50px, 75px);
+  transform: perspective(500) translate3d(30px, 50px, 75px); }
+
+.skew {
+  -moz-transform: skew(20deg, 50deg);
+  -webkit-transform: skew(20deg, 50deg);
+  -o-transform: skew(20deg, 50deg);
+  transform: skew(20deg, 50deg); }
+
+.skew-3d {
+  -webkit-transform: skew(20deg, 50deg);
+  transform: skew(20deg, 50deg); }
+
+.skew-x {
+  -moz-transform: skewX(20deg);
+  -webkit-transform: skewX(20deg);
+  -o-transform: skewX(20deg);
+  transform: skewX(20deg); }
+
+.skew-x-3d {
+  -webkit-transform: skewX(20deg);
+  transform: skewX(20deg); }
+
+.skew-y {
+  -moz-transform: skewY(20deg);
+  -webkit-transform: skewY(20deg);
+  -o-transform: skewY(20deg);
+  transform: skewY(20deg); }
+
+.skew-y-3d {
+  -webkit-transform: skewY(20deg);
+  transform: skewY(20deg); }
+
+.create-transform-2d {
+  -moz-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -webkit-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -o-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -moz-transform-origin: 50%;
+  -webkit-transform-origin: 50%;
+  -o-transform-origin: 50%;
+  transform-origin: 50%; }
+
+.create-transform-3d {
+  -moz-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -webkit-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -o-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -moz-transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%; }
+
+.simple-transform {
+  -moz-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -webkit-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -o-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -moz-transform-origin: 10% 10%;
+  -webkit-transform-origin: 10% 10%;
+  -o-transform-origin: 10% 10%;
+  transform-origin: 10% 10%; }

test/fixtures/stylesheets/compass/sass/transform.scss

@@ -0,0 +1,87 @@
+@import "compass/css3/transform-v2";
+
+.apply-origin-2d                  { @include apply-origin(2px 5%, false); }
+.apply-origin-3d                  { @include apply-origin(2px 5% 2in, true); }
+.transform-origin-2d              { @include transform-origin(100px, 100px); }
+.transform-origin-3d              { @include transform-origin(100px, 100px, 100px); }
+.transform-2d                     { @include transform2d(rotateY(20deg)); }
+.transform-3d                     { @include transform3d(rotateZ(20deg)); }
+.perspective                      { @include perspective(500); }
+.perspective-origin               { @include perspective-origin(25% 25%)}
+.transform-style                  { @include transform-style; }
+.backface-visibility              { @include backface-visibility;}
+.scale                            { @include scale(30px, 50px);}
+.scale-3d                         { @include scale(30px, 50px, false, true);}
+.scale-with-perspective           { @include scale(30px, 50px, 500);}
+.scale-3d-with-perspective        { @include scale(30px, 50px, 500, true);}
+.scale-x                          { @include scaleX(30px);}
+.scale-x-3d                       { @include scaleX(30px, false, true);}
+.scale-x-with-perspective         { @include scaleX(30px, 500);}
+.scale-x-3d-with-perspective      { @include scaleX(30px, 500, true);}
+.scale-y                          { @include scaleY(50px);}
+.scale-y-3d                       { @include scaleY(50px, false, true);}
+.scale-y-with-perspective         { @include scaleY(50px, 500);}
+.scale-y-3d-with-perspective      { @include scaleY(50px, 500, true);}
+.scale-z                          { @include scaleZ(50px);}
+.scale-z-with-perspective         { @include scaleZ(50px, 500);}
+.scale3d                          { @include scale3d(30px, 50px, 100px);}
+.scaled3-with-perspective         { @include scale3d(30px, 50px, 100px, 500);}
+.rotate                           { @include rotate(25deg, 500);}
+.rotate-with-perspective          { @include rotate(25deg, 500);}
+.rotate-z                         { @include rotateZ(25deg);}
+.rotate-z-with-perspective        { @include rotateZ(25deg, 500);}
+.rotate-x                         { @include rotateX(25deg);}
+.rotate-x-with-perspective        { @include rotateX(25deg, 500);}
+.rotate-y                         { @include rotateY(25deg);}
+.rotate-y-with-perspective        { @include rotateY(25deg, 500);}
+.rotate-3d                        { @include rotate3d(5, 2, 1, 75deg);}
+.rotate-3d-with-perspective       { @include rotate3d(5, 2, 1, 75deg, 500);}
+.translate                        { @include translate(20px, 30%);}
+.translate-with-perspective       { @include translate(20px, 30%, 500);}
+.translate-3d                     { @include translate(20px, 30%, false, true);}
+.translate-3d-with-perspective    { @include translate(20px, 30%, 500, true);}
+.translate-x                      { @include translateX(30px);}
+.translate-x-3d                   { @include translateX(30px, false, true);}
+.translate-x-with-perspective     { @include translateX(30px, 500);}
+.translate-x-3d-with-perspective  { @include translateX(30px, 500, true);}
+.translate-y                      { @include translateY(30px);}
+.translate-y-3d                   { @include translateY(30px, false, true);}
+.translate-y-with-perspective     { @include translateY(30px, 500);}
+.translate-y-3d-with-perspective  { @include translateY(30px, 500, true);}
+.translate-z                      { @include translateZ(30px);}
+.translate-z-with-perspective     { @include translateZ(30px, 500);}
+.translate-3d                     { @include translate3d(30px, 50px, 75px);}
+.translate-3d-with-perspective    { @include translate3d(30px, 50px, 75px, 500);}
+.skew                             { @include skew(20deg, 50deg);}
+.skew-3d                          { @include skew(20deg, 50deg, true);}
+.skew-x                           { @include skewX(20deg);}
+.skew-x-3d                        { @include skewX(20deg, true);}
+.skew-y                           { @include skewY(20deg);}
+.skew-y-3d                        { @include skewY(20deg, true);}
+.create-transform-2d              { @include create-transform(
+                                               500,
+                                               20px, 20px, false,
+                                               25deg, 25deg, false, false
+                                               50px, 50px, false,
+                                               50deg, 50deg,
+                                               50%, 50%, false
+                                              );
+                                  }
+.create-transform-3d              { @include create-transform(
+                                               500,
+                                               20px, 20px, 20px,
+                                               25deg, 25deg, 25deg, false
+                                               50px, 50px, 50px,
+                                               50deg, 50deg,
+                                               50%, 50%, 50%
+                                              );
+                                  }
+
+.simple-transform                 { @include simple-transform(
+                                               25px,
+                                               25deg,
+                                               10px, 10px,
+                                               30deg, 30deg,
+                                               10%, 10%
+                                             );
+                                  }