From c46e3c53ab482afc7bb8bbc975388cb891a14fc8 Mon Sep 17 00:00:00 2001
From: "Andrey A.I. Sitnik" <andrey@sitnik.ru>
Date: Thu, 15 Mar 2012 21:35:17 +0400
Subject: [PATCH 1/3] 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 {

From 439959d47d3d3c1cda48f189e04c2b04922ad16a Mon Sep 17 00:00:00 2001
From: "Andrey A.I. Sitnik" <andrey@sitnik.ru>
Date: Fri, 16 Mar 2012 01:25:37 +0400
Subject: [PATCH 2/3] Add 3D transformations with -ms- 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 7457b31a..9c78df6b 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,
-      -moz, -webkit, not -o, not -ms, not -khtml, official
+      -moz, -webkit, not -o, -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,
-      -moz, -webkit, not -o, not -ms, not -khtml, official
+      -moz, -webkit, not -o, -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,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, not -o, -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,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, not -o, -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,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, not -o, -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,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, not -o, -ms, not -khtml, official
   );
 }
 
diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css
index 6ddb8327..3c06da88 100644
--- a/test/fixtures/stylesheets/compass/css/transform.css
+++ b/test/fixtures/stylesheets/compass/css/transform.css
@@ -8,6 +8,7 @@
 .apply-origin-3d {
   -webkit-transform-origin: 2px 5% 2in;
   -moz-transform-origin: 2px 5% 2in;
+  -ms-transform-origin: 2px 5% 2in;
   transform-origin: 2px 5% 2in; }
 
 .transform-origin-2d {
@@ -20,6 +21,7 @@
 .transform-origin-3d {
   -webkit-transform-origin: 100px 100px 100px;
   -moz-transform-origin: 100px 100px 100px;
+  -ms-transform-origin: 100px 100px 100px;
   transform-origin: 100px 100px 100px; }
 
 .transform-2d {
@@ -32,26 +34,31 @@
 .transform-3d {
   -webkit-transform: rotateZ(20deg);
   -moz-transform: rotateZ(20deg);
+  -ms-transform: rotateZ(20deg);
   transform: rotateZ(20deg); }
 
 .perspective {
   -webkit-perspective: 500;
   -moz-perspective: 500;
+  -ms-perspective: 500;
   perspective: 500; }
 
 .perspective-origin {
   -webkit-perspective-origin: 25% 25%;
   -moz-perspective-origin: 25% 25%;
+  -ms-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;
   transform-style: preserve-3d; }
 
 .backface-visibility {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
   backface-visibility: hidden; }
 
 .scale {
@@ -64,6 +71,7 @@
 .scale-3d {
   -webkit-transform: scale(30px, 50px);
   -moz-transform: scale(30px, 50px);
+  -ms-transform: scale(30px, 50px);
   transform: scale(30px, 50px); }
 
 .scale-with-perspective {
@@ -76,6 +84,7 @@
 .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);
   transform: perspective(500) scale(30px, 50px); }
 
 .scale-x {
@@ -88,6 +97,7 @@
 .scale-x-3d {
   -webkit-transform: scaleX(30px);
   -moz-transform: scaleX(30px);
+  -ms-transform: scaleX(30px);
   transform: scaleX(30px); }
 
 .scale-x-with-perspective {
@@ -100,6 +110,7 @@
 .scale-x-3d-with-perspective {
   -webkit-transform: perspective(500) scaleX(30px);
   -moz-transform: perspective(500) scaleX(30px);
+  -ms-transform: perspective(500) scaleX(30px);
   transform: perspective(500) scaleX(30px); }
 
 .scale-y {
@@ -112,6 +123,7 @@
 .scale-y-3d {
   -webkit-transform: scaleY(50px);
   -moz-transform: scaleY(50px);
+  -ms-transform: scaleY(50px);
   transform: scaleY(50px); }
 
 .scale-y-with-perspective {
@@ -124,26 +136,31 @@
 .scale-y-3d-with-perspective {
   -webkit-transform: perspective(500) scaleY(50px);
   -moz-transform: perspective(500) scaleY(50px);
+  -ms-transform: perspective(500) scaleY(50px);
   transform: perspective(500) scaleY(50px); }
 
 .scale-z {
   -webkit-transform: scaleZ(50px);
   -moz-transform: scaleZ(50px);
+  -ms-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);
   transform: perspective(500) scaleZ(50px); }
 
 .scale3d {
   -webkit-transform: scale3d(30px, 50px, 100px);
   -moz-transform: scale3d(30px, 50px, 100px);
+  -ms-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);
   transform: perspective(500) scale3d(30px, 50px, 100px); }
 
 .rotate {
@@ -177,31 +194,37 @@
 .rotate-x {
   -webkit-transform: rotateX(25deg);
   -moz-transform: rotateX(25deg);
+  -ms-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);
   transform: perspective(500) rotateX(25deg); }
 
 .rotate-y {
   -webkit-transform: rotateY(25deg);
   -moz-transform: rotateY(25deg);
+  -ms-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);
   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);
   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);
   transform: perspective(500) rotate3d(5, 2, 1, 75deg); }
 
 .translate {
@@ -221,11 +244,13 @@
 .translate-3d {
   -webkit-transform: translate(20px, 30%);
   -moz-transform: translate(20px, 30%);
+  -ms-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%);
   transform: perspective(500) translate(20px, 30%); }
 
 .translate-x {
@@ -238,6 +263,7 @@
 .translate-x-3d {
   -webkit-transform: translateX(30px);
   -moz-transform: translateX(30px);
+  -ms-transform: translateX(30px);
   transform: translateX(30px); }
 
 .translate-x-with-perspective {
@@ -250,6 +276,7 @@
 .translate-x-3d-with-perspective {
   -webkit-transform: perspective(500) translateX(30px);
   -moz-transform: perspective(500) translateX(30px);
+  -ms-transform: perspective(500) translateX(30px);
   transform: perspective(500) translateX(30px); }
 
 .translate-y {
@@ -262,6 +289,7 @@
 .translate-y-3d {
   -webkit-transform: translateY(30px);
   -moz-transform: translateY(30px);
+  -ms-transform: translateY(30px);
   transform: translateY(30px); }
 
 .translate-y-with-perspective {
@@ -274,26 +302,31 @@
 .translate-y-3d-with-perspective {
   -webkit-transform: perspective(500) translateY(30px);
   -moz-transform: perspective(500) translateY(30px);
+  -ms-transform: perspective(500) translateY(30px);
   transform: perspective(500) translateY(30px); }
 
 .translate-z {
   -webkit-transform: translateZ(30px);
   -moz-transform: translateZ(30px);
+  -ms-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);
   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);
   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);
   transform: perspective(500) translate3d(30px, 50px, 75px); }
 
 .skew {
@@ -306,6 +339,7 @@
 .skew-3d {
   -webkit-transform: skew(20deg, 50deg);
   -moz-transform: skew(20deg, 50deg);
+  -ms-transform: skew(20deg, 50deg);
   transform: skew(20deg, 50deg); }
 
 .skew-x {
@@ -318,6 +352,7 @@
 .skew-x-3d {
   -webkit-transform: skewX(20deg);
   -moz-transform: skewX(20deg);
+  -ms-transform: skewX(20deg);
   transform: skewX(20deg); }
 
 .skew-y {
@@ -330,6 +365,7 @@
 .skew-y-3d {
   -webkit-transform: skewY(20deg);
   -moz-transform: skewY(20deg);
+  -ms-transform: skewY(20deg);
   transform: skewY(20deg); }
 
 .create-transform-2d {

From 436a2575e13892d4735aa772fb4aa335adee75c0 Mon Sep 17 00:00:00 2001
From: "Andrey A.I. Sitnik" <andrey@sitnik.ru>
Date: Fri, 16 Mar 2012 03:34:53 +0400
Subject: [PATCH 3/3] Add unsupported yet 3D transformations with -o- 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 9c78df6b..a7c5e6ee 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,
-      -moz, -webkit, not -o, -ms, not -khtml, official
+      -moz, -webkit, -o, -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,
-      -moz, -webkit, not -o, -ms, not -khtml, official
+      -moz, -webkit, -o, -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,
-    -moz, -webkit, not -o, -ms, not -khtml, official
+    -moz, -webkit, -o, -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,
-    -moz, -webkit, not -o, -ms, not -khtml, official
+    -moz, -webkit, -o, -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,
-    -moz, -webkit, not -o, -ms, not -khtml, official
+    -moz, -webkit, -o, -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,
-    -moz, -webkit, not -o, -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css
index 3c06da88..c6231069 100644
--- a/test/fixtures/stylesheets/compass/css/transform.css
+++ b/test/fixtures/stylesheets/compass/css/transform.css
@@ -9,6 +9,7 @@
   -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 {
@@ -22,6 +23,7 @@
   -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 {
@@ -35,30 +37,35 @@
   -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 {
@@ -72,6 +79,7 @@
   -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 {
@@ -85,6 +93,7 @@
   -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 {
@@ -98,6 +107,7 @@
   -webkit-transform: scaleX(30px);
   -moz-transform: scaleX(30px);
   -ms-transform: scaleX(30px);
+  -o-transform: scaleX(30px);
   transform: scaleX(30px); }
 
 .scale-x-with-perspective {
@@ -111,6 +121,7 @@
   -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 {
@@ -124,6 +135,7 @@
   -webkit-transform: scaleY(50px);
   -moz-transform: scaleY(50px);
   -ms-transform: scaleY(50px);
+  -o-transform: scaleY(50px);
   transform: scaleY(50px); }
 
 .scale-y-with-perspective {
@@ -137,30 +149,35 @@
   -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 {
@@ -195,36 +212,42 @@
   -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 {
@@ -245,12 +268,14 @@
   -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 {
@@ -264,6 +289,7 @@
   -webkit-transform: translateX(30px);
   -moz-transform: translateX(30px);
   -ms-transform: translateX(30px);
+  -o-transform: translateX(30px);
   transform: translateX(30px); }
 
 .translate-x-with-perspective {
@@ -277,6 +303,7 @@
   -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 {
@@ -290,6 +317,7 @@
   -webkit-transform: translateY(30px);
   -moz-transform: translateY(30px);
   -ms-transform: translateY(30px);
+  -o-transform: translateY(30px);
   transform: translateY(30px); }
 
 .translate-y-with-perspective {
@@ -303,30 +331,35 @@
   -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 {
@@ -340,6 +373,7 @@
   -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 {
@@ -353,6 +387,7 @@
   -webkit-transform: skewX(20deg);
   -moz-transform: skewX(20deg);
   -ms-transform: skewX(20deg);
+  -o-transform: skewX(20deg);
   transform: skewX(20deg); }
 
 .skew-y {
@@ -366,6 +401,7 @@
   -webkit-transform: skewY(20deg);
   -moz-transform: skewY(20deg);
   -ms-transform: skewY(20deg);
+  -o-transform: skewY(20deg);
   transform: skewY(20deg); }
 
 .create-transform-2d {