diff --git a/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss b/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss index 92eac97b..2a3d48ad 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss +++ b/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( - $origin, - $only3d: false -) { +@mixin apply-origin($origin, $only3d) { + $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; @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 -// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] ) -// where the 3 'origin-' arguments represent x/y/z coordinates -// ** setting z coordinates triggers 3D support list, leave false for 2D support +// 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. +// +// **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 -// @include transform-origin( [ origin-x, origin-y, origin-z ] ) -@mixin transform-origin3d( - $origin-x: $default-origin-x, - $origin-y: $default-origin-y, - $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 +// Transform sent as a complete string: +// +// @include transform( transforms [, 3D-only ] ) +// +// where 'transforms' is a space separated list 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 -// @include perspective( perspective ) +// Set the perspective of 3D transforms on the children of an element: +// +// @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( - $origin-x: 50%, - $origin-y: false -) { - $po: $origin-x; - @if $origin-y { $po: $po $origin-y; } - @include experimental(perspective-origin, $po, +@mixin perspective-origin($origin: 50%) { + @include experimental(perspective-origin, $origin, 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' -// browsers default to flat, mixin defaults to preserves-3d -@mixin transform-style($ts: unquote("preserves-3d")) { - @include experimental(perspective-origin, $ts, +// +// @include transform-style( [ style ] ) +// +// where `style` can be either `flat` or `preserves-3d` +// 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")) { - @include experimental(backface-visibility, $bv, +@mixin backface-visibility($visibility: hidden) { + @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 -// @include scale( [ scale-x, scale-y, perspective, 3D-only ] ) +// Scale an object along the x and y axis: +// +// @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) -// --------------------------------------------------------------------------- - - -// The full list of options +// +// **Note** This mixin cannot be combined with other transform mixins. @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, diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css new file mode 100644 index 00000000..09788ee2 --- /dev/null +++ b/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%; } diff --git a/test/fixtures/stylesheets/compass/sass/transform.scss b/test/fixtures/stylesheets/compass/sass/transform.scss new file mode 100644 index 00000000..0fe47c82 --- /dev/null +++ b/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% + ); + }