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 {