Add support for the -ms prefix in 2D transforms.
Closes GH-224.
This commit is contained in:
Chris Eppstein
parent
93040322b3
commit
a86a94e4c2
@ -94,7 +94,7 @@ $default-skew-y : 5deg !default;
|
||||
);
|
||||
} @else {
|
||||
@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 {
|
||||
@include experimental(transform, $transform,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
-moz, -webkit, -o, -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
-moz-transform-origin: 2px 5%;
|
||||
-webkit-transform-origin: 2px 5%;
|
||||
-o-transform-origin: 2px 5%;
|
||||
-ms-transform-origin: 2px 5%;
|
||||
transform-origin: 2px 5%; }
|
||||
|
||||
.apply-origin-3d {
|
||||
@ -12,6 +13,7 @@
|
||||
-moz-transform-origin: 100px 100px;
|
||||
-webkit-transform-origin: 100px 100px;
|
||||
-o-transform-origin: 100px 100px;
|
||||
-ms-transform-origin: 100px 100px;
|
||||
transform-origin: 100px 100px; }
|
||||
|
||||
.transform-origin-3d {
|
||||
@ -22,6 +24,7 @@
|
||||
-moz-transform: rotateY(20deg);
|
||||
-webkit-transform: rotateY(20deg);
|
||||
-o-transform: rotateY(20deg);
|
||||
-ms-transform: rotateY(20deg);
|
||||
transform: rotateY(20deg); }
|
||||
|
||||
.transform-3d {
|
||||
@ -48,6 +51,7 @@
|
||||
-moz-transform: scale(30px, 50px);
|
||||
-webkit-transform: scale(30px, 50px);
|
||||
-o-transform: scale(30px, 50px);
|
||||
-ms-transform: scale(30px, 50px);
|
||||
transform: scale(30px, 50px); }
|
||||
|
||||
.scale-3d {
|
||||
@ -58,6 +62,7 @@
|
||||
-moz-transform: perspective(500) scale(30px, 50px);
|
||||
-webkit-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); }
|
||||
|
||||
.scale-3d-with-perspective {
|
||||
@ -68,6 +73,7 @@
|
||||
-moz-transform: scaleX(30px);
|
||||
-webkit-transform: scaleX(30px);
|
||||
-o-transform: scaleX(30px);
|
||||
-ms-transform: scaleX(30px);
|
||||
transform: scaleX(30px); }
|
||||
|
||||
.scale-x-3d {
|
||||
@ -78,6 +84,7 @@
|
||||
-moz-transform: perspective(500) scaleX(30px);
|
||||
-webkit-transform: perspective(500) scaleX(30px);
|
||||
-o-transform: perspective(500) scaleX(30px);
|
||||
-ms-transform: perspective(500) scaleX(30px);
|
||||
transform: perspective(500) scaleX(30px); }
|
||||
|
||||
.scale-x-3d-with-perspective {
|
||||
@ -88,6 +95,7 @@
|
||||
-moz-transform: scaleY(50px);
|
||||
-webkit-transform: scaleY(50px);
|
||||
-o-transform: scaleY(50px);
|
||||
-ms-transform: scaleY(50px);
|
||||
transform: scaleY(50px); }
|
||||
|
||||
.scale-y-3d {
|
||||
@ -98,6 +106,7 @@
|
||||
-moz-transform: perspective(500) scaleY(50px);
|
||||
-webkit-transform: perspective(500) scaleY(50px);
|
||||
-o-transform: perspective(500) scaleY(50px);
|
||||
-ms-transform: perspective(500) scaleY(50px);
|
||||
transform: perspective(500) scaleY(50px); }
|
||||
|
||||
.scale-y-3d-with-perspective {
|
||||
@ -124,24 +133,28 @@
|
||||
-moz-transform: perspective(500) rotate(25deg);
|
||||
-webkit-transform: perspective(500) rotate(25deg);
|
||||
-o-transform: perspective(500) rotate(25deg);
|
||||
-ms-transform: perspective(500) rotate(25deg);
|
||||
transform: perspective(500) rotate(25deg); }
|
||||
|
||||
.rotate-with-perspective {
|
||||
-moz-transform: perspective(500) rotate(25deg);
|
||||
-webkit-transform: perspective(500) rotate(25deg);
|
||||
-o-transform: perspective(500) rotate(25deg);
|
||||
-ms-transform: perspective(500) rotate(25deg);
|
||||
transform: perspective(500) rotate(25deg); }
|
||||
|
||||
.rotate-z {
|
||||
-moz-transform: rotate(25deg);
|
||||
-webkit-transform: rotate(25deg);
|
||||
-o-transform: rotate(25deg);
|
||||
-ms-transform: rotate(25deg);
|
||||
transform: rotate(25deg); }
|
||||
|
||||
.rotate-z-with-perspective {
|
||||
-moz-transform: perspective(500) rotate(25deg);
|
||||
-webkit-transform: perspective(500) rotate(25deg);
|
||||
-o-transform: perspective(500) rotate(25deg);
|
||||
-ms-transform: perspective(500) rotate(25deg);
|
||||
transform: perspective(500) rotate(25deg); }
|
||||
|
||||
.rotate-x {
|
||||
@ -172,12 +185,14 @@
|
||||
-moz-transform: translate(20px, 30%);
|
||||
-webkit-transform: translate(20px, 30%);
|
||||
-o-transform: translate(20px, 30%);
|
||||
-ms-transform: translate(20px, 30%);
|
||||
transform: translate(20px, 30%); }
|
||||
|
||||
.translate-with-perspective {
|
||||
-moz-transform: perspective(500) translate(20px, 30%);
|
||||
-webkit-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%); }
|
||||
|
||||
.translate-3d {
|
||||
@ -192,6 +207,7 @@
|
||||
-moz-transform: translateX(30px);
|
||||
-webkit-transform: translateX(30px);
|
||||
-o-transform: translateX(30px);
|
||||
-ms-transform: translateX(30px);
|
||||
transform: translateX(30px); }
|
||||
|
||||
.translate-x-3d {
|
||||
@ -202,6 +218,7 @@
|
||||
-moz-transform: perspective(500) translateX(30px);
|
||||
-webkit-transform: perspective(500) translateX(30px);
|
||||
-o-transform: perspective(500) translateX(30px);
|
||||
-ms-transform: perspective(500) translateX(30px);
|
||||
transform: perspective(500) translateX(30px); }
|
||||
|
||||
.translate-x-3d-with-perspective {
|
||||
@ -212,6 +229,7 @@
|
||||
-moz-transform: translateY(30px);
|
||||
-webkit-transform: translateY(30px);
|
||||
-o-transform: translateY(30px);
|
||||
-ms-transform: translateY(30px);
|
||||
transform: translateY(30px); }
|
||||
|
||||
.translate-y-3d {
|
||||
@ -222,6 +240,7 @@
|
||||
-moz-transform: perspective(500) translateY(30px);
|
||||
-webkit-transform: perspective(500) translateY(30px);
|
||||
-o-transform: perspective(500) translateY(30px);
|
||||
-ms-transform: perspective(500) translateY(30px);
|
||||
transform: perspective(500) translateY(30px); }
|
||||
|
||||
.translate-y-3d-with-perspective {
|
||||
@ -248,6 +267,7 @@
|
||||
-moz-transform: skew(20deg, 50deg);
|
||||
-webkit-transform: skew(20deg, 50deg);
|
||||
-o-transform: skew(20deg, 50deg);
|
||||
-ms-transform: skew(20deg, 50deg);
|
||||
transform: skew(20deg, 50deg); }
|
||||
|
||||
.skew-3d {
|
||||
@ -258,6 +278,7 @@
|
||||
-moz-transform: skewX(20deg);
|
||||
-webkit-transform: skewX(20deg);
|
||||
-o-transform: skewX(20deg);
|
||||
-ms-transform: skewX(20deg);
|
||||
transform: skewX(20deg); }
|
||||
|
||||
.skew-x-3d {
|
||||
@ -268,6 +289,7 @@
|
||||
-moz-transform: skewY(20deg);
|
||||
-webkit-transform: skewY(20deg);
|
||||
-o-transform: skewY(20deg);
|
||||
-ms-transform: skewY(20deg);
|
||||
transform: skewY(20deg); }
|
||||
|
||||
.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%);
|
||||
-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%);
|
||||
-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%);
|
||||
-moz-transform-origin: 50%;
|
||||
-webkit-transform-origin: 50%;
|
||||
-o-transform-origin: 50%;
|
||||
-ms-transform-origin: 50%;
|
||||
transform-origin: 50%; }
|
||||
|
||||
.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%);
|
||||
-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%);
|
||||
-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%);
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%; }
|
||||
|
||||
.simple-transform {
|
||||
-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);
|
||||
-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);
|
||||
-moz-transform-origin: 10% 10%;
|
||||
-webkit-transform-origin: 10% 10%;
|
||||
-o-transform-origin: 10% 10%;
|
||||
-ms-transform-origin: 10% 10%;
|
||||
transform-origin: 10% 10%; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user