Add unsupported yet 3D transformations with -o- prefix
This commit is contained in:
Andrey A.I. Sitnik
parent
439959d47d
commit
436a2575e1
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user