Skip to content

Commit

Permalink
Add 3D transformations with -moz, -ms, and -o prefixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ai @chriseppstein
ai authored and chriseppstein committed Mar 18, 2012
1 parent 48bfe18 commit 6165057
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 6 deletions.
12 changes: 6 additions & 6 deletions frameworks/compass/stylesheets/compass/css3/_transform.scss
View file
Expand Up @@ -104,7 +104,7 @@ $default-skew-y : 5deg !default;
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2; $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
@if $only3d { @if $only3d {
@include experimental(transform-origin, $origin, @include experimental(transform-origin, $origin,
not -moz, -webkit, not -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} @else { } @else {
@include experimental(transform-origin, $origin, @include experimental(transform-origin, $origin,
Expand Down Expand Up @@ -147,7 +147,7 @@ $default-skew-y : 5deg !default;
) { ) {
@if $only3d { @if $only3d {
@include experimental(transform, $transform, @include experimental(transform, $transform,
not -moz, -webkit, not -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} @else { } @else {
@include experimental(transform, $transform, @include experimental(transform, $transform,
Expand Down Expand Up @@ -179,7 +179,7 @@ $default-skew-y : 5deg !default;
// values from 500 to 1000 are more-or-less "normal" - a good starting-point. // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
@mixin perspective($p) { @mixin perspective($p) {
@include experimental(perspective, $p, @include experimental(perspective, $p,
not -moz, -webkit, not -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }


Expand All @@ -190,7 +190,7 @@ $default-skew-y : 5deg !default;
// where the two arguments represent x/y coordinates // where the two arguments represent x/y coordinates
@mixin perspective-origin($origin: 50%) { @mixin perspective-origin($origin: 50%) {
@include experimental(perspective-origin, $origin, @include experimental(perspective-origin, $origin,
not -moz, -webkit, not -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }


Expand All @@ -202,7 +202,7 @@ $default-skew-y : 5deg !default;
// browsers default to `flat`, mixin defaults to `preserve-3d` // browsers default to `flat`, mixin defaults to `preserve-3d`
@mixin transform-style($style: preserve-3d) { @mixin transform-style($style: preserve-3d) {
@include experimental(transform-style, $style, @include experimental(transform-style, $style,
not -moz, -webkit, not -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }


Expand All @@ -214,7 +214,7 @@ $default-skew-y : 5deg !default;
// browsers default to visible, mixin defaults to hidden // browsers default to visible, mixin defaults to hidden
@mixin backface-visibility($visibility: hidden) { @mixin backface-visibility($visibility: hidden) {
@include experimental(backface-visibility, $visibility, @include experimental(backface-visibility, $visibility,
not -moz, -webkit, not -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }


Expand Down
108 changes: 108 additions & 0 deletions test/fixtures/stylesheets/compass/css/transform.css
View file
Expand Up @@ -7,6 +7,9 @@


.apply-origin-3d { .apply-origin-3d {
-webkit-transform-origin: 2px 5% 2in; -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: 2px 5% 2in; }


.transform-origin-2d { .transform-origin-2d {
Expand All @@ -18,6 +21,9 @@


.transform-origin-3d { .transform-origin-3d {
-webkit-transform-origin: 100px 100px 100px; -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-origin: 100px 100px 100px; }


.transform-2d { .transform-2d {
Expand All @@ -29,22 +35,37 @@


.transform-3d { .transform-3d {
-webkit-transform: rotateZ(20deg); -webkit-transform: rotateZ(20deg);
-moz-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
-o-transform: rotateZ(20deg);
transform: rotateZ(20deg); } transform: rotateZ(20deg); }


.perspective { .perspective {
-webkit-perspective: 500; -webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
perspective: 500; } perspective: 500; }


.perspective-origin { .perspective-origin {
-webkit-perspective-origin: 25% 25%; -webkit-perspective-origin: 25% 25%;
-moz-perspective-origin: 25% 25%;
-ms-perspective-origin: 25% 25%;
-o-perspective-origin: 25% 25%;
perspective-origin: 25% 25%; } perspective-origin: 25% 25%; }


.transform-style { .transform-style {
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; } transform-style: preserve-3d; }


.backface-visibility { .backface-visibility {
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; } backface-visibility: hidden; }


.scale { .scale {
Expand All @@ -56,6 +77,9 @@


.scale-3d { .scale-3d {
-webkit-transform: scale(30px, 50px); -webkit-transform: scale(30px, 50px);
-moz-transform: scale(30px, 50px);
-ms-transform: scale(30px, 50px);
-o-transform: scale(30px, 50px);
transform: scale(30px, 50px); } transform: scale(30px, 50px); }


.scale-with-perspective { .scale-with-perspective {
Expand All @@ -67,6 +91,9 @@


.scale-3d-with-perspective { .scale-3d-with-perspective {
-webkit-transform: perspective(500) scale(30px, 50px); -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); } transform: perspective(500) scale(30px, 50px); }


.scale-x { .scale-x {
Expand All @@ -78,6 +105,9 @@


.scale-x-3d { .scale-x-3d {
-webkit-transform: scaleX(30px); -webkit-transform: scaleX(30px);
-moz-transform: scaleX(30px);
-ms-transform: scaleX(30px);
-o-transform: scaleX(30px);
transform: scaleX(30px); } transform: scaleX(30px); }


.scale-x-with-perspective { .scale-x-with-perspective {
Expand All @@ -89,6 +119,9 @@


.scale-x-3d-with-perspective { .scale-x-3d-with-perspective {
-webkit-transform: perspective(500) scaleX(30px); -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); } transform: perspective(500) scaleX(30px); }


.scale-y { .scale-y {
Expand All @@ -100,6 +133,9 @@


.scale-y-3d { .scale-y-3d {
-webkit-transform: scaleY(50px); -webkit-transform: scaleY(50px);
-moz-transform: scaleY(50px);
-ms-transform: scaleY(50px);
-o-transform: scaleY(50px);
transform: scaleY(50px); } transform: scaleY(50px); }


.scale-y-with-perspective { .scale-y-with-perspective {
Expand All @@ -111,22 +147,37 @@


.scale-y-3d-with-perspective { .scale-y-3d-with-perspective {
-webkit-transform: perspective(500) scaleY(50px); -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); } transform: perspective(500) scaleY(50px); }


.scale-z { .scale-z {
-webkit-transform: scaleZ(50px); -webkit-transform: scaleZ(50px);
-moz-transform: scaleZ(50px);
-ms-transform: scaleZ(50px);
-o-transform: scaleZ(50px);
transform: scaleZ(50px); } transform: scaleZ(50px); }


.scale-z-with-perspective { .scale-z-with-perspective {
-webkit-transform: perspective(500) scaleZ(50px); -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); } transform: perspective(500) scaleZ(50px); }


.scale3d { .scale3d {
-webkit-transform: scale3d(30px, 50px, 100px); -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); } transform: scale3d(30px, 50px, 100px); }


.scaled3-with-perspective { .scaled3-with-perspective {
-webkit-transform: perspective(500) scale3d(30px, 50px, 100px); -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); } transform: perspective(500) scale3d(30px, 50px, 100px); }


.rotate { .rotate {
Expand Down Expand Up @@ -159,26 +210,44 @@


.rotate-x { .rotate-x {
-webkit-transform: rotateX(25deg); -webkit-transform: rotateX(25deg);
-moz-transform: rotateX(25deg);
-ms-transform: rotateX(25deg);
-o-transform: rotateX(25deg);
transform: rotateX(25deg); } transform: rotateX(25deg); }


.rotate-x-with-perspective { .rotate-x-with-perspective {
-webkit-transform: perspective(500) rotateX(25deg); -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); } transform: perspective(500) rotateX(25deg); }


.rotate-y { .rotate-y {
-webkit-transform: rotateY(25deg); -webkit-transform: rotateY(25deg);
-moz-transform: rotateY(25deg);
-ms-transform: rotateY(25deg);
-o-transform: rotateY(25deg);
transform: rotateY(25deg); } transform: rotateY(25deg); }


.rotate-y-with-perspective { .rotate-y-with-perspective {
-webkit-transform: perspective(500) rotateY(25deg); -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); } transform: perspective(500) rotateY(25deg); }


.rotate-3d { .rotate-3d {
-webkit-transform: rotate3d(5, 2, 1, 75deg); -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); } transform: rotate3d(5, 2, 1, 75deg); }


.rotate-3d-with-perspective { .rotate-3d-with-perspective {
-webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg); -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); } transform: perspective(500) rotate3d(5, 2, 1, 75deg); }


.translate { .translate {
Expand All @@ -197,10 +266,16 @@


.translate-3d { .translate-3d {
-webkit-transform: translate(20px, 30%); -webkit-transform: translate(20px, 30%);
-moz-transform: translate(20px, 30%);
-ms-transform: translate(20px, 30%);
-o-transform: translate(20px, 30%);
transform: translate(20px, 30%); } transform: translate(20px, 30%); }


.translate-3d-with-perspective { .translate-3d-with-perspective {
-webkit-transform: perspective(500) translate(20px, 30%); -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%); } transform: perspective(500) translate(20px, 30%); }


.translate-x { .translate-x {
Expand All @@ -212,6 +287,9 @@


.translate-x-3d { .translate-x-3d {
-webkit-transform: translateX(30px); -webkit-transform: translateX(30px);
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-o-transform: translateX(30px);
transform: translateX(30px); } transform: translateX(30px); }


.translate-x-with-perspective { .translate-x-with-perspective {
Expand All @@ -223,6 +301,9 @@


.translate-x-3d-with-perspective { .translate-x-3d-with-perspective {
-webkit-transform: perspective(500) translateX(30px); -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); } transform: perspective(500) translateX(30px); }


.translate-y { .translate-y {
Expand All @@ -234,6 +315,9 @@


.translate-y-3d { .translate-y-3d {
-webkit-transform: translateY(30px); -webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px); } transform: translateY(30px); }


.translate-y-with-perspective { .translate-y-with-perspective {
Expand All @@ -245,22 +329,37 @@


.translate-y-3d-with-perspective { .translate-y-3d-with-perspective {
-webkit-transform: perspective(500) translateY(30px); -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); } transform: perspective(500) translateY(30px); }


.translate-z { .translate-z {
-webkit-transform: translateZ(30px); -webkit-transform: translateZ(30px);
-moz-transform: translateZ(30px);
-ms-transform: translateZ(30px);
-o-transform: translateZ(30px);
transform: translateZ(30px); } transform: translateZ(30px); }


.translate-z-with-perspective { .translate-z-with-perspective {
-webkit-transform: perspective(500) translateZ(30px); -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); } transform: perspective(500) translateZ(30px); }


.translate-3d { .translate-3d {
-webkit-transform: translate3d(30px, 50px, 75px); -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); } transform: translate3d(30px, 50px, 75px); }


.translate-3d-with-perspective { .translate-3d-with-perspective {
-webkit-transform: perspective(500) translate3d(30px, 50px, 75px); -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); } transform: perspective(500) translate3d(30px, 50px, 75px); }


.skew { .skew {
Expand All @@ -272,6 +371,9 @@


.skew-3d { .skew-3d {
-webkit-transform: skew(20deg, 50deg); -webkit-transform: skew(20deg, 50deg);
-moz-transform: skew(20deg, 50deg);
-ms-transform: skew(20deg, 50deg);
-o-transform: skew(20deg, 50deg);
transform: skew(20deg, 50deg); } transform: skew(20deg, 50deg); }


.skew-x { .skew-x {
Expand All @@ -283,6 +385,9 @@


.skew-x-3d { .skew-x-3d {
-webkit-transform: skewX(20deg); -webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg); } transform: skewX(20deg); }


.skew-y { .skew-y {
Expand All @@ -294,6 +399,9 @@


.skew-y-3d { .skew-y-3d {
-webkit-transform: skewY(20deg); -webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-ms-transform: skewY(20deg);
-o-transform: skewY(20deg);
transform: skewY(20deg); } transform: skewY(20deg); }


.create-transform-2d { .create-transform-2d {
Expand Down

0 comments on commit 6165057

Please sign in to comment.