Browse files

Update transform module

  • Loading branch information...
1 parent 625c0d3 commit 8577a2800ab824941871965f29c7c180ef5bd245 Eric Meyer committed Mar 5, 2013
View
7 doc-src/content/CHANGELOG.markdown
@@ -17,6 +17,13 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
-------------------------
* [CSS3] All browser-support functions and mixins use same `-moz, -webkit, -ms, -o, -khtml, official` order. This is a change to `experimental()`, `experimental-only-for()`, and `experimental-value()`, which had `-o` listed before `-ms`.
+* [CSS3] Updated `transform` module browser-support matrix.
+* [CSS3] Remove `legacy-transform` module. Please use the current `transform` module.
+* [CSS3] Remove `$only3d` argument from all `$transform` mixins. We switch to 3d-only support in the few cases we can test for, but it's not enough different for the toggle to be useful as a feature-support check. Use modernizr instead.
+* [CSS3] Deprecate `transform2d` in favor of `transform`.
+* [CSS3] Combine `$default-origin-` variables into single `$default-origin` variable.
+* [CSS3] `transform-origin` now takes a single space-sperated argument, using the official w3c syntax.
+* [CSS3] Deprecate `apply-origin` in favor of `transform-origin`.
0.13.alpha.2 (02/07/2012)
-------------------------
View
88 frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss
@@ -1,87 +1,3 @@
-@import "shared";
+// 404 Not Found.
-@warn "This version of the transform module has been deprecated and will be removed.";
-
-// CSS Transform and Transform-Origin
-
-// Apply a transform sent as a complete string.
-
-@mixin apply-transform($transform) {
- @include experimental(transform, $transform,
- -moz, -webkit, not -ms, -o, not -khtml, official
- );
-}
-
-// Apply a transform-origin sent as a complete string.
-
-@mixin apply-origin($origin) {
- @include experimental(transform-origin, $origin,
- -moz, -webkit, not -ms, -o, not -khtml, official
- );
-}
-
-// transform-origin requires x and y coordinates
-//
-// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
-
-@mixin transform-origin($originx: 50%, $originy: 50%) {
- @if $originx or $originy {
- @if $originy {
- @include apply-origin($originx or 50% $originy);
- } @else {
- @include apply-origin($originx);
- }
- }
-}
-
-// A full transform mixin with everything you could want
-//
-// * including origin adjustments if you want them
-// * scale, rotate and skew require units of degrees(deg)
-// * scale takes a multiplier, rotate and skew take degrees
-
-@mixin transform(
- $scale: 1,
- $rotate: 0deg,
- $transx: 0,
- $transy: 0,
- $skewx: 0deg,
- $skewy: 0deg,
- $originx: false,
- $originy: false
-) {
- $transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
- @include apply-transform($transform);
- @include transform-origin($originx, $originy);
-}
-
-// Transform Partials
-//
-// These work well on their own, but they don't add to each other, they override.
-// Use them with extra origin args, or along side +transform-origin
-
-// Adjust only the scale, with optional origin coordinates
-
-@mixin scale($scale: 1.25, $originx: false, $originy: false) {
- @include apply-transform(scale($scale));
- @include transform-origin($originx, $originy);
-}
-
-// Adjust only the rotation, with optional origin coordinates
-
-@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
- @include apply-transform(rotate($rotate));
- @include transform-origin($originx, $originy);
-}
-
-// Adjust only the translation
-
-@mixin translate($transx: 0, $transy: 0) {
- @include apply-transform(translate($transx, $transy));
-}
-
-// Adjust only the skew, with optional origin coordinates
-@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
- @include apply-transform(skew($skewx, $skewy));
- @include transform-origin($originx, $originy);
-}
+@warn "Transform-legacy has been removed. Please import the main transform module instead.";
View
420 frameworks/compass/stylesheets/compass/css3/_transform.scss
@@ -1,59 +1,14 @@
+// Transform
+
@import "shared";
-// @doc off
-// Note ----------------------------------------------------------------------
-// Safari, Chrome, and Firefox all support 3D transforms. However,
-// only in the most recent builds. You should also provide fallback 2d support for
-// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
-// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
-// to switch between the two support lists. The toggle defaults to 'false' (2D),
-// and also accepts 'true' (3D). Currently the lists are as follows:
-// 2D: Mozilla, Webkit, Opera, Official
-// 3D: Webkit, Firefox.
-
-// Available Transforms ------------------------------------------------------
-// - Scale (2d and 3d)
-// - Rotate (2d and 3d)
-// - Translate (2d and 3d)
-// - Skew (2d only)
-
-// Transform Parameters ------------------------------------------------------
-// - Transform Origin (2d and 3d)
-// - Perspective (3d)
-// - Perspective Origin (3d)
-// - Transform Style (3d)
-// - Backface Visibility (3d)
-
-// Mixins --------------------------------------------------------------------
-// transform-origin
-// - shortcuts: transform-origin2d, transform-origin3d
-// - helpers: apply-origin
-// transform
-// - shortcuts: transform2d, transform3d
-// - helpers: simple-transform, create-transform
-// perspective
-// - helpers: perspective-origin
-// transform-style
-// backface-visibility
-// scale
-// - shortcuts: scaleX, scaleY, scaleZ, scale3d
-// rotate
-// - shortcuts: rotateX, rotateY, rotate3d
-// translate
-// - shortcuts: translateX, translateY, translateZ, translate3d
-// skew
-// - shortcuts: skewX, skewY
-
-// Defaults ------------------------------------------------------------------
-// @doc on
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+$transform-support: not -moz, -webkit, -ms, not -o, not -khtml;
+$transform-3d-support: not -moz, -webkit, not -ms, not -o, not -khtml;
// The default x-origin for transforms
-$default-origin-x : 50% !default;
-// The default y-origin for transforms
-$default-origin-y : 50% !default;
-// The default z-origin for transforms
-$default-origin-z : 50% !default;
-
+$default-origin : 50% 50% !default;
// The default x-multiplier for scaling
$default-scale-x : 1.25 !default;
@@ -88,254 +43,212 @@ $default-skew-x : 5deg !default;
// The default y-angle for skewing
$default-skew-y : 5deg !default;
-
-// **Transform-origin**
-// Transform-origin sent as a complete string
+// Transform-origin sent as space-delimited list:
//
-// @include apply-origin( origin [, 3D-only ] )
-//
-// 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) {
- $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
- @if $only3d {
- @include experimental(transform-origin, $origin,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
+// @include transform-origin( [ $origin ] )
+@mixin transform-origin(
+ $origin: $default-origin
+) {
+ $origin: compact($origin);
+ $is3d: if(length($origin) > 2, true, false);
+ @if $is3d {
+ @include experimental(transform-origin, $origin, $transform-3d-support...);
} @else {
- @include experimental(transform-origin, $origin,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
+ @include experimental(transform-origin, $origin, $transform-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: if($origin-z, true, false)
+// @doc off
+// @private
+// legacy wrapper for transform-origin
+@mixin apply-origin(
+ $origin: $default-origin
) {
- $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; }
- @include apply-origin($origin, $only3d);
- }
+ @warn "apply-origin() has been depricated in favor of the more correct transform-origin() mixin.";
+ @include transform-origin($origin);
}
-
+// @doc on
// Transform sent as a complete string:
//
-// @include transform( transforms [, 3D-only ] )
+// @include transform( $transform )
//
-// where 'transforms' is a space separated list of all the transforms to be applied.
-@mixin transform(
- $transform,
- $only3d: false
-) {
- @if $only3d {
- @include experimental(transform, $transform,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
- } @else {
- @include experimental(transform, $transform,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
- }
+// where '$transform` is a space separated list of all the transforms to be applied.
+@mixin transform($transform) {
+ @include experimental(transform, $transform, $transform-support...);
}
-// Shortcut to target all browsers with 2D transform support
-@mixin transform2d($trans) {
- @include transform($trans, false);
+// @doc off
+// @private
+// Legacy long-cut for transform()
+@mixin transform2d($transform) {
+ @warn "transform2d() has been depricated in favor of the simpler transform() mixin.";
+ @include transform($transform);
}
+// @doc on
-// Shortcut to target only browsers with 3D transform support
-@mixin transform3d($trans) {
- @include transform($trans, true);
+// Transform using the 3d support matrix
+@mixin transform3d($transform) {
+ @include experimental(transform, $transform, $transform-3d-support...);
}
-// @doc off
-// 3D Parameters -------------------------------------------------------------
-// @doc on
-
// Set the perspective of 3D transforms on the children of an element:
//
-// @include perspective( perspective )
+// @include perspective( $perspective )
//
// where 'perspective' is a unitless number representing the depth of the
// z-axis. The higher the perspective, the more exaggerated the foreshortening.
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
-@mixin perspective($p) {
- @include experimental(perspective, $p,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
+@mixin perspective($perspective) {
+ @include experimental(perspective, $perspective, $transform-3d-support...);
}
// Set the origin position for the perspective
//
-// @include perspective-origin(origin-x [origin-y])
+// @include perspective-origin( [ $origin ] )
//
-// where the two arguments represent x/y coordinates
-@mixin perspective-origin($origin: 50%) {
- @include experimental(perspective-origin, $origin,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
+// where the argument represents x/y coordinates
+@mixin perspective-origin($origin: $default-origin) {
+ @include experimental(perspective-origin, $origin, $transform-3d-support...);
}
// Determine whether a 3D objects children also live in the given 3D space
//
-// @include transform-style( [ style ] )
+// @include transform-style( [ $style ] )
//
// where `style` can be either `flat` or `preserve-3d`.
// Browsers default to `flat`, mixin defaults to `preserve-3d`.
@mixin transform-style($style: preserve-3d) {
- @include experimental(transform-style, $style,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
+ @include experimental(transform-style, $style, $transform-3d-support...);
}
// Determine the visibility of an element when it's back is turned
//
-// @include backface-visibility( [ visibility ] )
+// @include backface-visibility( [ $visibility ] )
//
// where `visibility` can be either `visible` or `hidden`.
// Browsers default to visible, mixin defaults to hidden
@mixin backface-visibility($visibility: hidden) {
- @include experimental(backface-visibility, $visibility,
- -moz, -webkit, -ms, -o, not -khtml, official
- );
+ @include experimental(backface-visibility, $visibility, $transform-3d-support...);
}
// @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
-// ---------------------------------------------------------------------------
-
-
-// Scale ---------------------------------------------------------------------
// @doc on
// 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 ] )
//
// 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,
- $perspective: false,
- $only3d: false
+ $scale-x : $default-scale-x,
+ $scale-y : $scale-x,
+ $perspective : false
) {
$trans: scale($scale-x, $scale-y);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// Scale an object along the x axis
-// @include scaleX( [ scale-x, perspective, 3D-only ] )
+// @include scaleX( [ $scale-x, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scaleX(
- $scale: $default-scale-x,
- $perspective: false,
- $only3d: false
+ $scale : $default-scale-x,
+ $perspective : false
) {
$trans: scaleX($scale);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// Scale an object along the y axis
-// @include scaleY( [ scale-y, perspective, 3D-only ] )
+// @include scaleY( [ $scale-y, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scaleY(
- $scale: $default-scale-y,
- $perspective: false,
- $only3d: false
+ $scale : $default-scale-y,
+ $perspective : false
) {
$trans: scaleY($scale);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// Scale an object along the z axis
-// @include scaleZ( [ scale-z, perspective ] )
+// @include scaleZ( [ $scale-z, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scaleZ(
- $scale: $default-scale-z,
- $perspective: false
+ $scale : $default-scale-z,
+ $perspective : false
) {
$trans: scaleZ($scale);
@if $perspective { $trans: perspective($perspective) $trans; }
@include transform3d($trans);
}
// Scale and object along all three axis
-// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
+// @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,
- $scale-z: $default-scale-z,
- $perspective: false
+ $scale-x : $default-scale-x,
+ $scale-y : $default-scale-y,
+ $scale-z : $default-scale-z,
+ $perspective : false
) {
$trans: scale3d($scale-x, $scale-y, $scale-z);
@if $perspective { $trans: perspective($perspective) $trans; }
@include transform3d($trans);
}
-// @doc off
-// Rotate --------------------------------------------------------------------
-// @doc on
-
// Rotate an object around the z axis (2D)
-// @include rotate( [ rotation, perspective, 3D-only ] )
+// @include rotate( [ $rotate, $perspective ] )
// 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,
- $only3d: false
+ $perspective: false
) {
$trans: rotate($rotate);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// 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,
- $only3d: false
+ $perspective: false
) {
- @include rotate($rotate, $perspective, $only3d);
+ @include rotate($rotate, $perspective);
}
// Rotate an object around the x axis (3D)
-// @include rotateX( [ rotation, perspective ] )
+// @include rotateX( [ $rotate, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotateX(
@@ -348,7 +261,7 @@ $default-skew-y : 5deg !default;
}
// Rotate an object around the y axis (3D)
-// @include rotate( [ rotation, perspective ] )
+// @include rotate( [ $rotate, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotateY(
@@ -361,7 +274,7 @@ $default-skew-y : 5deg !default;
}
// Rotate an object around an arbitrary axis (3D)
-// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
+// @include rotate( [ $vector-x, $vector-y, $vector-z, $rotate, $perspective ] )
// 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.
@@ -379,56 +292,58 @@ $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 ] )
+// @include translate( [ $translate-x, $translate-y, $perspective ] )
// 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,
- $perspective: false,
- $only3d: false
+ $perspective: false
) {
$trans: translate($translate-x, $translate-y);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// Move an object along the x axis (2D)
-// @include translate( [ translate-x, perspective, 3D-only ] )
+// @include translate( [ $translate-x, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translateX(
$trans-x: $default-translate-x,
- $perspective: false,
- $only3d: false
+ $perspective: false
) {
$trans: translateX($trans-x);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// Move an object along the y axis (2D)
-// @include translate( [ translate-y, perspective, 3D-only ] )
+// @include translate( [ $translate-y, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translateY(
$trans-y: $default-translate-y,
- $perspective: false,
- $only3d: false
+ $perspective: false
) {
$trans: translateY($trans-y);
- @if $perspective { $trans: perspective($perspective) $trans; }
- @include transform($trans, $only3d);
+ @if $perspective {
+ @include transform3d(perspective($perspective) $trans);
+ } @else {
+ @include transform($trans);
+ }
}
// Move an object along the z axis (3D)
-// @include translate( [ translate-z, perspective ] )
+// @include translate( [ $translate-z, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translateZ(
@@ -441,7 +356,7 @@ $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 ] )
+// @include translate( [ $translate-x, $translate-y, $translate-z, $perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translate3d(
@@ -455,50 +370,43 @@ $default-skew-y : 5deg !default;
@include transform3d($trans);
}
-// @doc off
-// Skew ----------------------------------------------------------------------
-// @doc on
-
// Skew an element:
//
-// @include skew( [ skew-x, skew-y, 3D-only ] )
+// @include skew( [ $skew-x, $skew-y ] )
//
// 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,
- $only3d: false
+ $skew-y: $default-skew-y
) {
$trans: skew($skew-x, $skew-y);
- @include transform($trans, $only3d);
+ @include transform($trans);
}
// Skew an element along the x axiz
//
-// @include skew( [ skew-x, 3D-only ] )
+// @include skew( [ $skew-x ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin skewX(
- $skew-x: $default-skew-x,
- $only3d: false
+ $skew-x: $default-skew-x
) {
$trans: skewX($skew-x);
- @include transform($trans, $only3d);
+ @include transform($trans);
}
// Skew an element along the y axis
//
-// @include skew( [ skew-y, 3D-only ] )
+// @include skew( [ $skew-y ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin skewY(
- $skew-y: $default-skew-y,
- $only3d: false
+ $skew-y: $default-skew-y
) {
$trans: skewY($skew-y);
- @include transform($trans, $only3d);
+ @include transform($trans);
}
@@ -512,25 +420,29 @@ $default-skew-y : 5deg !default;
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin create-transform(
- $perspective: false,
- $scale-x: false,
- $scale-y: false,
- $scale-z: false,
- $rotate-x: false,
- $rotate-y: false,
- $rotate-z: false,
- $rotate3d: false,
- $trans-x: false,
- $trans-y: false,
- $trans-z: false,
- $skew-x: false,
- $skew-y: false,
- $origin-x: false,
- $origin-y: false,
- $origin-z: false,
- $only3d: false
+ $perspective: null,
+ $scale-x: null,
+ $scale-y: null,
+ $scale-z: null,
+ $rotate-x: null,
+ $rotate-y: null,
+ $rotate-z: null,
+ $rotate3d: null,
+ $trans-x: null,
+ $trans-y: null,
+ $trans-z: null,
+ $skew-x: null,
+ $skew-y: null,
+ $origin-x: null,
+ $origin-y: null,
+ $origin-z: null
) {
$trans: unquote("");
+ $is3d: false;
+
+ @if $perspective or $scale-z or $rotate-x or $rotate-y or $rotate3d or $trans-z or $origin-z {
+ $is3d: true;
+ }
// perspective
@if $perspective { $trans: perspective($perspective) ; }
@@ -569,30 +481,34 @@ $default-skew-y : 5deg !default;
}
// apply it!
- @include transform($trans, $only3d);
- @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
+ @if $is3d {
+ @include transform3d($trans);
+ @include experimental(transform-origin, $origin-x $origin-y $origin-z, $transform-3d-support...);
+ } @else {
+ @include transform($trans);
+ @include transform-origin($origin-x $origin-y $origin-z);
+ }
}
// A simplified set of options
// backwards-compatible with the previous version of the 'transform' mixin
@mixin simple-transform(
- $scale: false,
- $rotate: false,
- $trans-x: false,
- $trans-y: false,
- $skew-x: false,
- $skew-y: false,
- $origin-x: false,
- $origin-y: false
+ $scale: null,
+ $rotate: null,
+ $trans-x: null,
+ $trans-y: null,
+ $skew-x: null,
+ $skew-y: null,
+ $origin-x: null,
+ $origin-y: null
) {
@include create-transform(
- false,
- $scale, $scale, false,
- false, false, $rotate, false,
- $trans-x, $trans-y, false,
+ null,
+ $scale, $scale, null,
+ null, null, $rotate, null,
+ $trans-x, $trans-y, null,
$skew-x, $skew-y,
- $origin-x, $origin-y, false,
- false
+ $origin-x, $origin-y, null
);
}
View
248 test/fixtures/stylesheets/compass/css/transform.css
@@ -1,441 +1,195 @@
-.apply-origin-2d {
- -webkit-transform-origin: 2px 5%;
- -moz-transform-origin: 2px 5%;
- -ms-transform-origin: 2px 5%;
- -o-transform-origin: 2px 5%;
- transform-origin: 2px 5%; }
-
-.apply-origin-3d {
- -webkit-transform-origin: 2px 5% 2in;
- -moz-transform-origin: 2px 5% 2in;
- -ms-transform-origin: 2px 5% 2in;
- -o-transform-origin: 2px 5% 2in;
- transform-origin: 2px 5% 2in; }
-
.transform-origin-2d {
-webkit-transform-origin: 100px 100px;
- -moz-transform-origin: 100px 100px;
-ms-transform-origin: 100px 100px;
- -o-transform-origin: 100px 100px;
transform-origin: 100px 100px; }
.transform-origin-3d {
-webkit-transform-origin: 100px 100px 100px;
- -moz-transform-origin: 100px 100px 100px;
- -ms-transform-origin: 100px 100px 100px;
- -o-transform-origin: 100px 100px 100px;
transform-origin: 100px 100px 100px; }
-.transform-2d {
+.transform {
-webkit-transform: rotateY(20deg);
- -moz-transform: rotateY(20deg);
-ms-transform: rotateY(20deg);
- -o-transform: rotateY(20deg);
transform: rotateY(20deg); }
.transform-3d {
-webkit-transform: rotateZ(20deg);
- -moz-transform: rotateZ(20deg);
- -ms-transform: rotateZ(20deg);
- -o-transform: rotateZ(20deg);
transform: rotateZ(20deg); }
.perspective {
-webkit-perspective: 500;
- -moz-perspective: 500;
- -ms-perspective: 500;
- -o-perspective: 500;
perspective: 500; }
.perspective-origin {
-webkit-perspective-origin: 25% 25%;
- -moz-perspective-origin: 25% 25%;
- -ms-perspective-origin: 25% 25%;
- -o-perspective-origin: 25% 25%;
perspective-origin: 25% 25%; }
.transform-style {
-webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
transform-style: preserve-3d; }
.backface-visibility {
-webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
- -o-backface-visibility: hidden;
backface-visibility: hidden; }
.scale {
-webkit-transform: scale(30px, 50px);
- -moz-transform: scale(30px, 50px);
- -ms-transform: scale(30px, 50px);
- -o-transform: scale(30px, 50px);
- transform: scale(30px, 50px); }
-
-.scale-3d {
- -webkit-transform: scale(30px, 50px);
- -moz-transform: scale(30px, 50px);
-ms-transform: scale(30px, 50px);
- -o-transform: scale(30px, 50px);
transform: scale(30px, 50px); }
.scale-with-perspective {
-webkit-transform: perspective(500) scale(30px, 50px);
- -moz-transform: perspective(500) scale(30px, 50px);
- -ms-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);
- -moz-transform: perspective(500) scale(30px, 50px);
- -ms-transform: perspective(500) scale(30px, 50px);
- -o-transform: perspective(500) scale(30px, 50px);
transform: perspective(500) scale(30px, 50px); }
.scale-x {
-webkit-transform: scaleX(30px);
- -moz-transform: scaleX(30px);
-ms-transform: scaleX(30px);
- -o-transform: scaleX(30px);
- transform: scaleX(30px); }
-
-.scale-x-3d {
- -webkit-transform: scaleX(30px);
- -moz-transform: scaleX(30px);
- -ms-transform: scaleX(30px);
- -o-transform: scaleX(30px);
transform: scaleX(30px); }
.scale-x-with-perspective {
-webkit-transform: perspective(500) scaleX(30px);
- -moz-transform: perspective(500) scaleX(30px);
- -ms-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);
- -moz-transform: perspective(500) scaleX(30px);
- -ms-transform: perspective(500) scaleX(30px);
- -o-transform: perspective(500) scaleX(30px);
transform: perspective(500) scaleX(30px); }
.scale-y {
-webkit-transform: scaleY(50px);
- -moz-transform: scaleY(50px);
-ms-transform: scaleY(50px);
- -o-transform: scaleY(50px);
- transform: scaleY(50px); }
-
-.scale-y-3d {
- -webkit-transform: scaleY(50px);
- -moz-transform: scaleY(50px);
- -ms-transform: scaleY(50px);
- -o-transform: scaleY(50px);
transform: scaleY(50px); }
.scale-y-with-perspective {
-webkit-transform: perspective(500) scaleY(50px);
- -moz-transform: perspective(500) scaleY(50px);
- -ms-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);
- -moz-transform: perspective(500) scaleY(50px);
- -ms-transform: perspective(500) scaleY(50px);
- -o-transform: perspective(500) scaleY(50px);
transform: perspective(500) scaleY(50px); }
.scale-z {
-webkit-transform: scaleZ(50px);
- -moz-transform: scaleZ(50px);
- -ms-transform: scaleZ(50px);
- -o-transform: scaleZ(50px);
transform: scaleZ(50px); }
.scale-z-with-perspective {
-webkit-transform: perspective(500) scaleZ(50px);
- -moz-transform: perspective(500) scaleZ(50px);
- -ms-transform: perspective(500) scaleZ(50px);
- -o-transform: perspective(500) scaleZ(50px);
transform: perspective(500) scaleZ(50px); }
.scale3d {
-webkit-transform: scale3d(30px, 50px, 100px);
- -moz-transform: scale3d(30px, 50px, 100px);
- -ms-transform: scale3d(30px, 50px, 100px);
- -o-transform: scale3d(30px, 50px, 100px);
transform: scale3d(30px, 50px, 100px); }
.scaled3-with-perspective {
-webkit-transform: perspective(500) scale3d(30px, 50px, 100px);
- -moz-transform: perspective(500) scale3d(30px, 50px, 100px);
- -ms-transform: perspective(500) scale3d(30px, 50px, 100px);
- -o-transform: perspective(500) scale3d(30px, 50px, 100px);
transform: perspective(500) scale3d(30px, 50px, 100px); }
.rotate {
-webkit-transform: perspective(500) rotate(25deg);
- -moz-transform: perspective(500) rotate(25deg);
- -ms-transform: perspective(500) rotate(25deg);
- -o-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); }
.rotate-with-perspective {
-webkit-transform: perspective(500) rotate(25deg);
- -moz-transform: perspective(500) rotate(25deg);
- -ms-transform: perspective(500) rotate(25deg);
- -o-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); }
.rotate-z {
-webkit-transform: rotate(25deg);
- -moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
- -o-transform: rotate(25deg);
transform: rotate(25deg); }
.rotate-z-with-perspective {
-webkit-transform: perspective(500) rotate(25deg);
- -moz-transform: perspective(500) rotate(25deg);
- -ms-transform: perspective(500) rotate(25deg);
- -o-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); }
.rotate-x {
-webkit-transform: rotateX(25deg);
- -moz-transform: rotateX(25deg);
- -ms-transform: rotateX(25deg);
- -o-transform: rotateX(25deg);
transform: rotateX(25deg); }
.rotate-x-with-perspective {
-webkit-transform: perspective(500) rotateX(25deg);
- -moz-transform: perspective(500) rotateX(25deg);
- -ms-transform: perspective(500) rotateX(25deg);
- -o-transform: perspective(500) rotateX(25deg);
transform: perspective(500) rotateX(25deg); }
.rotate-y {
-webkit-transform: rotateY(25deg);
- -moz-transform: rotateY(25deg);
- -ms-transform: rotateY(25deg);
- -o-transform: rotateY(25deg);
transform: rotateY(25deg); }
.rotate-y-with-perspective {
-webkit-transform: perspective(500) rotateY(25deg);
- -moz-transform: perspective(500) rotateY(25deg);
- -ms-transform: perspective(500) rotateY(25deg);
- -o-transform: perspective(500) rotateY(25deg);
transform: perspective(500) rotateY(25deg); }
.rotate-3d {
-webkit-transform: rotate3d(5, 2, 1, 75deg);
- -moz-transform: rotate3d(5, 2, 1, 75deg);
- -ms-transform: rotate3d(5, 2, 1, 75deg);
- -o-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);
- -moz-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
- -ms-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
- -o-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
transform: perspective(500) rotate3d(5, 2, 1, 75deg); }
.translate {
-webkit-transform: translate(20px, 30%);
- -moz-transform: translate(20px, 30%);
-ms-transform: translate(20px, 30%);
- -o-transform: translate(20px, 30%);
transform: translate(20px, 30%); }
.translate-with-perspective {
-webkit-transform: perspective(500) translate(20px, 30%);
- -moz-transform: perspective(500) translate(20px, 30%);
- -ms-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%);
- -moz-transform: translate(20px, 30%);
- -ms-transform: translate(20px, 30%);
- -o-transform: translate(20px, 30%);
- transform: translate(20px, 30%); }
-
-.translate-3d-with-perspective {
- -webkit-transform: perspective(500) translate(20px, 30%);
- -moz-transform: perspective(500) translate(20px, 30%);
- -ms-transform: perspective(500) translate(20px, 30%);
- -o-transform: perspective(500) translate(20px, 30%);
transform: perspective(500) translate(20px, 30%); }
.translate-x {
-webkit-transform: translateX(30px);
- -moz-transform: translateX(30px);
-ms-transform: translateX(30px);
- -o-transform: translateX(30px);
- transform: translateX(30px); }
-
-.translate-x-3d {
- -webkit-transform: translateX(30px);
- -moz-transform: translateX(30px);
- -ms-transform: translateX(30px);
- -o-transform: translateX(30px);
transform: translateX(30px); }
.translate-x-with-perspective {
-webkit-transform: perspective(500) translateX(30px);
- -moz-transform: perspective(500) translateX(30px);
- -ms-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);
- -moz-transform: perspective(500) translateX(30px);
- -ms-transform: perspective(500) translateX(30px);
- -o-transform: perspective(500) translateX(30px);
transform: perspective(500) translateX(30px); }
.translate-y {
-webkit-transform: translateY(30px);
- -moz-transform: translateY(30px);
-ms-transform: translateY(30px);
- -o-transform: translateY(30px);
- transform: translateY(30px); }
-
-.translate-y-3d {
- -webkit-transform: translateY(30px);
- -moz-transform: translateY(30px);
- -ms-transform: translateY(30px);
- -o-transform: translateY(30px);
transform: translateY(30px); }
.translate-y-with-perspective {
-webkit-transform: perspective(500) translateY(30px);
- -moz-transform: perspective(500) translateY(30px);
- -ms-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);
- -moz-transform: perspective(500) translateY(30px);
- -ms-transform: perspective(500) translateY(30px);
- -o-transform: perspective(500) translateY(30px);
transform: perspective(500) translateY(30px); }
.translate-z {
-webkit-transform: translateZ(30px);
- -moz-transform: translateZ(30px);
- -ms-transform: translateZ(30px);
- -o-transform: translateZ(30px);
transform: translateZ(30px); }
.translate-z-with-perspective {
-webkit-transform: perspective(500) translateZ(30px);
- -moz-transform: perspective(500) translateZ(30px);
- -ms-transform: perspective(500) translateZ(30px);
- -o-transform: perspective(500) translateZ(30px);
transform: perspective(500) translateZ(30px); }
.translate-3d {
-webkit-transform: translate3d(30px, 50px, 75px);
- -moz-transform: translate3d(30px, 50px, 75px);
- -ms-transform: translate3d(30px, 50px, 75px);
- -o-transform: translate3d(30px, 50px, 75px);
transform: translate3d(30px, 50px, 75px); }
.translate-3d-with-perspective {
-webkit-transform: perspective(500) translate3d(30px, 50px, 75px);
- -moz-transform: perspective(500) translate3d(30px, 50px, 75px);
- -ms-transform: perspective(500) translate3d(30px, 50px, 75px);
- -o-transform: perspective(500) translate3d(30px, 50px, 75px);
transform: perspective(500) translate3d(30px, 50px, 75px); }
.skew {
-webkit-transform: skew(20deg, 50deg);
- -moz-transform: skew(20deg, 50deg);
-ms-transform: skew(20deg, 50deg);
- -o-transform: skew(20deg, 50deg);
- transform: skew(20deg, 50deg); }
-
-.skew-3d {
- -webkit-transform: skew(20deg, 50deg);
- -moz-transform: skew(20deg, 50deg);
- -ms-transform: skew(20deg, 50deg);
- -o-transform: skew(20deg, 50deg);
transform: skew(20deg, 50deg); }
.skew-x {
-webkit-transform: skewX(20deg);
- -moz-transform: skewX(20deg);
- -ms-transform: skewX(20deg);
- -o-transform: skewX(20deg);
- transform: skewX(20deg); }
-
-.skew-x-3d {
- -webkit-transform: skewX(20deg);
- -moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
- -o-transform: skewX(20deg);
transform: skewX(20deg); }
.skew-y {
-webkit-transform: skewY(20deg);
- -moz-transform: skewY(20deg);
- -ms-transform: skewY(20deg);
- -o-transform: skewY(20deg);
- transform: skewY(20deg); }
-
-.skew-y-3d {
- -webkit-transform: skewY(20deg);
- -moz-transform: skewY(20deg);
-ms-transform: skewY(20deg);
- -o-transform: skewY(20deg);
transform: skewY(20deg); }
.create-transform-2d {
-webkit-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
- -moz-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
- -ms-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%);
-webkit-transform-origin: 50%;
- -moz-transform-origin: 50%;
- -ms-transform-origin: 50%;
- -o-transform-origin: 50%;
transform-origin: 50%; }
.create-transform-3d {
-webkit-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: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
- -ms-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%);
-webkit-transform-origin: 50% 50%;
- -moz-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- -o-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.simple-transform {
-webkit-transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
- -moz-transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
-ms-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);
-webkit-transform-origin: 10% 10%;
- -moz-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
- -o-transform-origin: 10% 10%;
transform-origin: 10% 10%; }
View
25 test/fixtures/stylesheets/compass/sass/transform.scss
@@ -1,27 +1,19 @@
@import "compass/css3/transform";
-.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-origin-2d { @include transform-origin(100px 100px); }
+.transform-origin-3d { @include transform-origin(100px 100px 100px); }
+.transform { @include transform(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);}
@@ -38,33 +30,24 @@
.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
+ 50%, 50%
);
}
.create-transform-3d { @include create-transform(

0 comments on commit 8577a28

Please sign in to comment.