From da044d9c6923bb7472b110301b1e1d9cfc543258 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Sat, 15 Mar 2014 17:56:24 +1100 Subject: WebKit CSS3 carousel transforms for supported devices --- less/carousel.less | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'less/carousel.less') diff --git a/less/carousel.less b/less/carousel.less index 6f5023756..9a374a447 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -230,3 +230,26 @@ bottom: 20px; } } + +// WebKit CSS3 transforms for supported devices +@media all and (-webkit-transform-3d) { + .carousel { + .item { + -webkit-transition: 0.6s -webkit-transform ease-in-out; + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; + &.next, &.active.right { + -webkit-transform: translate3d(100%,0,0); + left: 0; + } + &.prev, &.active.left { + -webkit-transform: translate3d(-100%,0,0); + left: 0; + } + &.next.left, &.prev.right, &.active { + -webkit-transform: translate3d(0%,0,0); + left: 0; + } + } + } +} -- cgit v1.2.3 From 8ab6746cbe567029400e0a50bff696599f358038 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Sat, 15 Mar 2014 18:30:09 +1100 Subject: Utilised mixins rather than specific WebKit properties --- less/carousel.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'less/carousel.less') diff --git a/less/carousel.less b/less/carousel.less index 9a374a447..1714abdec 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -235,19 +235,19 @@ @media all and (-webkit-transform-3d) { .carousel { .item { - -webkit-transition: 0.6s -webkit-transform ease-in-out; - -webkit-backface-visibility: hidden; - -webkit-perspective: 1000; + .transition-transform(~'0.6s ease-in-out'); + .backface-visibility(~'hidden'); + .perspective(1000); &.next, &.active.right { - -webkit-transform: translate3d(100%,0,0); + .translate3d(100%, 0, 0); left: 0; } &.prev, &.active.left { - -webkit-transform: translate3d(-100%,0,0); + .translate3d(-100%, 0, 0); left: 0; } &.next.left, &.prev.right, &.active { - -webkit-transform: translate3d(0%,0,0); + .translate3d(0%, 0, 0); left: 0; } } -- cgit v1.2.3 From bab63abee80eb2ceaa0c96b6417dde6baefa4718 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Sun, 16 Mar 2014 17:07:55 +1100 Subject: Removed unnecessary percentage sign for 3D translation --- less/carousel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/carousel.less') diff --git a/less/carousel.less b/less/carousel.less index 1714abdec..0d081928e 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -247,7 +247,7 @@ left: 0; } &.next.left, &.prev.right, &.active { - .translate3d(0%, 0, 0); + .translate3d(0, 0, 0); left: 0; } } -- cgit v1.2.3 From 4fa2d9e0ca3e3dcfc0db46329e2213550961ea7f Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Wed, 23 Apr 2014 20:36:49 +1000 Subject: Improved mixin ability with nested media query --- less/carousel.less | 42 +++++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 23 deletions(-) (limited to 'less/carousel.less') diff --git a/less/carousel.less b/less/carousel.less index 0d081928e..ea3cade88 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -24,6 +24,25 @@ &:extend(.img-responsive); line-height: 1; } + + // WebKit CSS3 transforms for supported devices + @media all and (-webkit-transform-3d) { + .transition-transform(~'0.6s ease-in-out'); + .backface-visibility(~'hidden'); + .perspective(1000); + &.next, &.active.right { + .translate3d(100%, 0, 0); + left: 0; + } + &.prev, &.active.left { + .translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, &.prev.right, &.active { + .translate3d(0, 0, 0); + left: 0; + } + } } > .active, @@ -230,26 +249,3 @@ bottom: 20px; } } - -// WebKit CSS3 transforms for supported devices -@media all and (-webkit-transform-3d) { - .carousel { - .item { - .transition-transform(~'0.6s ease-in-out'); - .backface-visibility(~'hidden'); - .perspective(1000); - &.next, &.active.right { - .translate3d(100%, 0, 0); - left: 0; - } - &.prev, &.active.left { - .translate3d(-100%, 0, 0); - left: 0; - } - &.next.left, &.prev.right, &.active { - .translate3d(0, 0, 0); - left: 0; - } - } - } -} -- cgit v1.2.3 From d6d8e204e6fac2fbe77b91dd50c30bc0f2d472e4 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Mon, 7 Jul 2014 12:20:06 +1000 Subject: Added Firefox support for CSS3 carousel transition --- less/carousel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/carousel.less') diff --git a/less/carousel.less b/less/carousel.less index ea3cade88..0cd7dc68e 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -26,7 +26,7 @@ } // WebKit CSS3 transforms for supported devices - @media all and (-webkit-transform-3d) { + @media all and (transform-3d), (-webkit-transform-3d) { .transition-transform(~'0.6s ease-in-out'); .backface-visibility(~'hidden'); .perspective(1000); -- cgit v1.2.3 From 30d1236a1d80dc085cd7925e64618a65300e0c03 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Tue, 8 Jul 2014 09:49:08 +1000 Subject: CSS3 Carousel code formatting --- less/carousel.less | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'less/carousel.less') diff --git a/less/carousel.less b/less/carousel.less index 0cd7dc68e..671d709df 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -30,15 +30,20 @@ .transition-transform(~'0.6s ease-in-out'); .backface-visibility(~'hidden'); .perspective(1000); - &.next, &.active.right { + + &.next, + &.active.right { .translate3d(100%, 0, 0); left: 0; } - &.prev, &.active.left { + &.prev, + &.active.left { .translate3d(-100%, 0, 0); left: 0; } - &.next.left, &.prev.right, &.active { + &.next.left, + &.prev.right, + &.active { .translate3d(0, 0, 0); left: 0; } -- cgit v1.2.3