github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for the -ms prefix in 2D transforms.

Browse Source 
Closes GH-224.
This commit is contained in:
Chris Eppstein 2010-12-05 21:02:16 -08:00
parent 93040322b3
commit a86a94e4c2
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frameworks/compass/stylesheets/compass/css3/_transform.scss
View File

@ -94,7 +94,7 @@ $default-skew-y : 5deg !default;
); );
} @else { } @else {
@include experimental(transform-origin, $origin, @include experimental(transform-origin, $origin,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
} }
@ -137,7 +137,7 @@ $default-skew-y : 5deg !default;
); );
} @else { } @else {
@include experimental(transform, $transform, @include experimental(transform, $transform,
-moz, -webkit, -o, not -ms, not -khtml, official -moz, -webkit, -o, -ms, not -khtml, official
); );
} }
} }

28
test/fixtures/stylesheets/compass/css/transform.css vendored
View File

@ -2,6 +2,7 @@
-moz-transform-origin: 2px 5%; -moz-transform-origin: 2px 5%;
-webkit-transform-origin: 2px 5%; -webkit-transform-origin: 2px 5%;
-o-transform-origin: 2px 5%; -o-transform-origin: 2px 5%;
-ms-transform-origin: 2px 5%;
transform-origin: 2px 5%; } transform-origin: 2px 5%; }
.apply-origin-3d { .apply-origin-3d {
@ -12,6 +13,7 @@
-moz-transform-origin: 100px 100px; -moz-transform-origin: 100px 100px;
-webkit-transform-origin: 100px 100px; -webkit-transform-origin: 100px 100px;
-o-transform-origin: 100px 100px; -o-transform-origin: 100px 100px;
-ms-transform-origin: 100px 100px;
transform-origin: 100px 100px; } transform-origin: 100px 100px; }
.transform-origin-3d { .transform-origin-3d {
@ -22,6 +24,7 @@
-moz-transform: rotateY(20deg); -moz-transform: rotateY(20deg);
-webkit-transform: rotateY(20deg); -webkit-transform: rotateY(20deg);
-o-transform: rotateY(20deg); -o-transform: rotateY(20deg);
-ms-transform: rotateY(20deg);
transform: rotateY(20deg); } transform: rotateY(20deg); }
.transform-3d { .transform-3d {
@ -48,6 +51,7 @@
-moz-transform: scale(30px, 50px); -moz-transform: scale(30px, 50px);
-webkit-transform: scale(30px, 50px); -webkit-transform: scale(30px, 50px);
-o-transform: scale(30px, 50px); -o-transform: scale(30px, 50px);
-ms-transform: scale(30px, 50px);
transform: scale(30px, 50px); } transform: scale(30px, 50px); }
.scale-3d { .scale-3d {
@ -58,6 +62,7 @@
-moz-transform: perspective(500) scale(30px, 50px); -moz-transform: perspective(500) scale(30px, 50px);
-webkit-transform: perspective(500) scale(30px, 50px); -webkit-transform: perspective(500) scale(30px, 50px);
-o-transform: perspective(500) scale(30px, 50px); -o-transform: perspective(500) scale(30px, 50px);
-ms-transform: perspective(500) scale(30px, 50px);
transform: perspective(500) scale(30px, 50px); } transform: perspective(500) scale(30px, 50px); }
.scale-3d-with-perspective { .scale-3d-with-perspective {
@ -68,6 +73,7 @@
-moz-transform: scaleX(30px); -moz-transform: scaleX(30px);
-webkit-transform: scaleX(30px); -webkit-transform: scaleX(30px);
-o-transform: scaleX(30px); -o-transform: scaleX(30px);
-ms-transform: scaleX(30px);
transform: scaleX(30px); } transform: scaleX(30px); }
.scale-x-3d { .scale-x-3d {
@ -78,6 +84,7 @@
-moz-transform: perspective(500) scaleX(30px); -moz-transform: perspective(500) scaleX(30px);
-webkit-transform: perspective(500) scaleX(30px); -webkit-transform: perspective(500) scaleX(30px);
-o-transform: perspective(500) scaleX(30px); -o-transform: perspective(500) scaleX(30px);
-ms-transform: perspective(500) scaleX(30px);
transform: perspective(500) scaleX(30px); } transform: perspective(500) scaleX(30px); }
.scale-x-3d-with-perspective { .scale-x-3d-with-perspective {
@ -88,6 +95,7 @@
-moz-transform: scaleY(50px); -moz-transform: scaleY(50px);
-webkit-transform: scaleY(50px); -webkit-transform: scaleY(50px);
-o-transform: scaleY(50px); -o-transform: scaleY(50px);
-ms-transform: scaleY(50px);
transform: scaleY(50px); } transform: scaleY(50px); }
.scale-y-3d { .scale-y-3d {
@ -98,6 +106,7 @@
-moz-transform: perspective(500) scaleY(50px); -moz-transform: perspective(500) scaleY(50px);
-webkit-transform: perspective(500) scaleY(50px); -webkit-transform: perspective(500) scaleY(50px);
-o-transform: perspective(500) scaleY(50px); -o-transform: perspective(500) scaleY(50px);
-ms-transform: perspective(500) scaleY(50px);
transform: perspective(500) scaleY(50px); } transform: perspective(500) scaleY(50px); }
.scale-y-3d-with-perspective { .scale-y-3d-with-perspective {
@ -124,24 +133,28 @@
-moz-transform: perspective(500) rotate(25deg); -moz-transform: perspective(500) rotate(25deg);
-webkit-transform: perspective(500) rotate(25deg); -webkit-transform: perspective(500) rotate(25deg);
-o-transform: perspective(500) rotate(25deg); -o-transform: perspective(500) rotate(25deg);
-ms-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); } transform: perspective(500) rotate(25deg); }
.rotate-with-perspective { .rotate-with-perspective {
-moz-transform: perspective(500) rotate(25deg); -moz-transform: perspective(500) rotate(25deg);
-webkit-transform: perspective(500) rotate(25deg); -webkit-transform: perspective(500) rotate(25deg);
-o-transform: perspective(500) rotate(25deg); -o-transform: perspective(500) rotate(25deg);
-ms-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); } transform: perspective(500) rotate(25deg); }
.rotate-z { .rotate-z {
-moz-transform: rotate(25deg); -moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg); -webkit-transform: rotate(25deg);
-o-transform: rotate(25deg); -o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg); } transform: rotate(25deg); }
.rotate-z-with-perspective { .rotate-z-with-perspective {
-moz-transform: perspective(500) rotate(25deg); -moz-transform: perspective(500) rotate(25deg);
-webkit-transform: perspective(500) rotate(25deg); -webkit-transform: perspective(500) rotate(25deg);
-o-transform: perspective(500) rotate(25deg); -o-transform: perspective(500) rotate(25deg);
-ms-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); } transform: perspective(500) rotate(25deg); }
.rotate-x { .rotate-x {
@ -172,12 +185,14 @@
-moz-transform: translate(20px, 30%); -moz-transform: translate(20px, 30%);
-webkit-transform: translate(20px, 30%); -webkit-transform: translate(20px, 30%);
-o-transform: translate(20px, 30%); -o-transform: translate(20px, 30%);
-ms-transform: translate(20px, 30%);
transform: translate(20px, 30%); } transform: translate(20px, 30%); }
.translate-with-perspective { .translate-with-perspective {
-moz-transform: perspective(500) translate(20px, 30%); -moz-transform: perspective(500) translate(20px, 30%);
-webkit-transform: perspective(500) translate(20px, 30%); -webkit-transform: perspective(500) translate(20px, 30%);
-o-transform: perspective(500) translate(20px, 30%); -o-transform: perspective(500) translate(20px, 30%);
-ms-transform: perspective(500) translate(20px, 30%);
transform: perspective(500) translate(20px, 30%); } transform: perspective(500) translate(20px, 30%); }
.translate-3d { .translate-3d {
@ -192,6 +207,7 @@
-moz-transform: translateX(30px); -moz-transform: translateX(30px);
-webkit-transform: translateX(30px); -webkit-transform: translateX(30px);
-o-transform: translateX(30px); -o-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px); } transform: translateX(30px); }
.translate-x-3d { .translate-x-3d {
@ -202,6 +218,7 @@
-moz-transform: perspective(500) translateX(30px); -moz-transform: perspective(500) translateX(30px);
-webkit-transform: perspective(500) translateX(30px); -webkit-transform: perspective(500) translateX(30px);
-o-transform: perspective(500) translateX(30px); -o-transform: perspective(500) translateX(30px);
-ms-transform: perspective(500) translateX(30px);
transform: perspective(500) translateX(30px); } transform: perspective(500) translateX(30px); }
.translate-x-3d-with-perspective { .translate-x-3d-with-perspective {
@ -212,6 +229,7 @@
-moz-transform: translateY(30px); -moz-transform: translateY(30px);
-webkit-transform: translateY(30px); -webkit-transform: translateY(30px);
-o-transform: translateY(30px); -o-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px); } transform: translateY(30px); }
.translate-y-3d { .translate-y-3d {
@ -222,6 +240,7 @@
-moz-transform: perspective(500) translateY(30px); -moz-transform: perspective(500) translateY(30px);
-webkit-transform: perspective(500) translateY(30px); -webkit-transform: perspective(500) translateY(30px);
-o-transform: perspective(500) translateY(30px); -o-transform: perspective(500) translateY(30px);
-ms-transform: perspective(500) translateY(30px);
transform: perspective(500) translateY(30px); } transform: perspective(500) translateY(30px); }
.translate-y-3d-with-perspective { .translate-y-3d-with-perspective {
@ -248,6 +267,7 @@
-moz-transform: skew(20deg, 50deg); -moz-transform: skew(20deg, 50deg);
-webkit-transform: skew(20deg, 50deg); -webkit-transform: skew(20deg, 50deg);
-o-transform: skew(20deg, 50deg); -o-transform: skew(20deg, 50deg);
-ms-transform: skew(20deg, 50deg);
transform: skew(20deg, 50deg); } transform: skew(20deg, 50deg); }
.skew-3d { .skew-3d {
@ -258,6 +278,7 @@
-moz-transform: skewX(20deg); -moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg); -webkit-transform: skewX(20deg);
-o-transform: skewX(20deg); -o-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg); } transform: skewX(20deg); }
.skew-x-3d { .skew-x-3d {
@ -268,6 +289,7 @@
-moz-transform: skewY(20deg); -moz-transform: skewY(20deg);
-webkit-transform: skewY(20deg); -webkit-transform: skewY(20deg);
-o-transform: skewY(20deg); -o-transform: skewY(20deg);
-ms-transform: skewY(20deg);
transform: skewY(20deg); } transform: skewY(20deg); }
.skew-y-3d { .skew-y-3d {
@ -278,28 +300,34 @@
-moz-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%);
-webkit-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%); -webkit-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%); -o-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%);
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%);
-moz-transform-origin: 50%; -moz-transform-origin: 50%;
-webkit-transform-origin: 50%; -webkit-transform-origin: 50%;
-o-transform-origin: 50%; -o-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%; } transform-origin: 50%; }
.create-transform-3d { .create-transform-3d {
-moz-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%);
-webkit-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: 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%); -o-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%);
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%);
-moz-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%; -o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%; } transform-origin: 50% 50%; }
.simple-transform { .simple-transform {
-moz-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);
-webkit-transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg); -webkit-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); -o-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);
transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg); transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
-moz-transform-origin: 10% 10%; -moz-transform-origin: 10% 10%;
-webkit-transform-origin: 10% 10%; -webkit-transform-origin: 10% 10%;
-o-transform-origin: 10% 10%; -o-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
transform-origin: 10% 10%; } transform-origin: 10% 10%; }