From c46e3c53ab482afc7bb8bbc975388cb891a14fc8 Mon Sep 17 00:00:00 2001 From: "Andrey A.I. Sitnik" Date: Thu, 15 Mar 2012 21:35:17 +0400 Subject: [PATCH] Add 3D transformations with -moz- prefix --- .../stylesheets/compass/css3/_transform.scss | 12 +++---- .../stylesheets/compass/css/transform.css | 36 +++++++++++++++++++ 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss index 93cc9d96..7457b31a 100644 --- a/frameworks/compass/stylesheets/compass/css3/_transform.scss +++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss @@ -104,7 +104,7 @@ $default-skew-y : 5deg !default; $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 + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @else { @include experimental(transform-origin, $origin, @@ -147,7 +147,7 @@ $default-skew-y : 5deg !default; ) { @if $only3d { @include experimental(transform, $transform, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @else { @include experimental(transform, $transform, @@ -179,7 +179,7 @@ $default-skew-y : 5deg !default; // values from 500 to 1000 are more-or-less "normal" - a good starting-point. @mixin perspective($p) { @include experimental(perspective, $p, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @@ -190,7 +190,7 @@ $default-skew-y : 5deg !default; // where the two arguments represent x/y coordinates @mixin perspective-origin($origin: 50%) { @include experimental(perspective-origin, $origin, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @@ -202,7 +202,7 @@ $default-skew-y : 5deg !default; // browsers default to `flat`, mixin defaults to `preserve-3d` @mixin transform-style($style: preserve-3d) { @include experimental(transform-style, $style, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } @@ -214,7 +214,7 @@ $default-skew-y : 5deg !default; // browsers default to visible, mixin defaults to hidden @mixin backface-visibility($visibility: hidden) { @include experimental(backface-visibility, $visibility, - not -moz, -webkit, not -o, not -ms, not -khtml, official + -moz, -webkit, not -o, not -ms, not -khtml, official ); } diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css index d79d25a8..6ddb8327 100644 --- a/test/fixtures/stylesheets/compass/css/transform.css +++ b/test/fixtures/stylesheets/compass/css/transform.css @@ -7,6 +7,7 @@ .apply-origin-3d { -webkit-transform-origin: 2px 5% 2in; + -moz-transform-origin: 2px 5% 2in; transform-origin: 2px 5% 2in; } .transform-origin-2d { @@ -18,6 +19,7 @@ .transform-origin-3d { -webkit-transform-origin: 100px 100px 100px; + -moz-transform-origin: 100px 100px 100px; transform-origin: 100px 100px 100px; } .transform-2d { @@ -29,22 +31,27 @@ .transform-3d { -webkit-transform: rotateZ(20deg); + -moz-transform: rotateZ(20deg); transform: rotateZ(20deg); } .perspective { -webkit-perspective: 500; + -moz-perspective: 500; perspective: 500; } .perspective-origin { -webkit-perspective-origin: 25% 25%; + -moz-perspective-origin: 25% 25%; perspective-origin: 25% 25%; } .transform-style { -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .backface-visibility { -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; backface-visibility: hidden; } .scale { @@ -56,6 +63,7 @@ .scale-3d { -webkit-transform: scale(30px, 50px); + -moz-transform: scale(30px, 50px); transform: scale(30px, 50px); } .scale-with-perspective { @@ -67,6 +75,7 @@ .scale-3d-with-perspective { -webkit-transform: perspective(500) scale(30px, 50px); + -moz-transform: perspective(500) scale(30px, 50px); transform: perspective(500) scale(30px, 50px); } .scale-x { @@ -78,6 +87,7 @@ .scale-x-3d { -webkit-transform: scaleX(30px); + -moz-transform: scaleX(30px); transform: scaleX(30px); } .scale-x-with-perspective { @@ -89,6 +99,7 @@ .scale-x-3d-with-perspective { -webkit-transform: perspective(500) scaleX(30px); + -moz-transform: perspective(500) scaleX(30px); transform: perspective(500) scaleX(30px); } .scale-y { @@ -100,6 +111,7 @@ .scale-y-3d { -webkit-transform: scaleY(50px); + -moz-transform: scaleY(50px); transform: scaleY(50px); } .scale-y-with-perspective { @@ -111,22 +123,27 @@ .scale-y-3d-with-perspective { -webkit-transform: perspective(500) scaleY(50px); + -moz-transform: perspective(500) scaleY(50px); transform: perspective(500) scaleY(50px); } .scale-z { -webkit-transform: scaleZ(50px); + -moz-transform: scaleZ(50px); transform: scaleZ(50px); } .scale-z-with-perspective { -webkit-transform: perspective(500) scaleZ(50px); + -moz-transform: perspective(500) scaleZ(50px); transform: perspective(500) scaleZ(50px); } .scale3d { -webkit-transform: scale3d(30px, 50px, 100px); + -moz-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); transform: perspective(500) scale3d(30px, 50px, 100px); } .rotate { @@ -159,26 +176,32 @@ .rotate-x { -webkit-transform: rotateX(25deg); + -moz-transform: rotateX(25deg); transform: rotateX(25deg); } .rotate-x-with-perspective { -webkit-transform: perspective(500) rotateX(25deg); + -moz-transform: perspective(500) rotateX(25deg); transform: perspective(500) rotateX(25deg); } .rotate-y { -webkit-transform: rotateY(25deg); + -moz-transform: rotateY(25deg); transform: rotateY(25deg); } .rotate-y-with-perspective { -webkit-transform: perspective(500) rotateY(25deg); + -moz-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); 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); transform: perspective(500) rotate3d(5, 2, 1, 75deg); } .translate { @@ -197,10 +220,12 @@ .translate-3d { -webkit-transform: translate(20px, 30%); + -moz-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%); transform: perspective(500) translate(20px, 30%); } .translate-x { @@ -212,6 +237,7 @@ .translate-x-3d { -webkit-transform: translateX(30px); + -moz-transform: translateX(30px); transform: translateX(30px); } .translate-x-with-perspective { @@ -223,6 +249,7 @@ .translate-x-3d-with-perspective { -webkit-transform: perspective(500) translateX(30px); + -moz-transform: perspective(500) translateX(30px); transform: perspective(500) translateX(30px); } .translate-y { @@ -234,6 +261,7 @@ .translate-y-3d { -webkit-transform: translateY(30px); + -moz-transform: translateY(30px); transform: translateY(30px); } .translate-y-with-perspective { @@ -245,22 +273,27 @@ .translate-y-3d-with-perspective { -webkit-transform: perspective(500) translateY(30px); + -moz-transform: perspective(500) translateY(30px); transform: perspective(500) translateY(30px); } .translate-z { -webkit-transform: translateZ(30px); + -moz-transform: translateZ(30px); transform: translateZ(30px); } .translate-z-with-perspective { -webkit-transform: perspective(500) translateZ(30px); + -moz-transform: perspective(500) translateZ(30px); transform: perspective(500) translateZ(30px); } .translate-3d { -webkit-transform: translate3d(30px, 50px, 75px); + -moz-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); transform: perspective(500) translate3d(30px, 50px, 75px); } .skew { @@ -272,6 +305,7 @@ .skew-3d { -webkit-transform: skew(20deg, 50deg); + -moz-transform: skew(20deg, 50deg); transform: skew(20deg, 50deg); } .skew-x { @@ -283,6 +317,7 @@ .skew-x-3d { -webkit-transform: skewX(20deg); + -moz-transform: skewX(20deg); transform: skewX(20deg); } .skew-y { @@ -294,6 +329,7 @@ .skew-y-3d { -webkit-transform: skewY(20deg); + -moz-transform: skewY(20deg); transform: skewY(20deg); } .create-transform-2d {