From da044d9c6923bb7472b110301b1e1d9cfc543258 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Sat, 15 Mar 2014 17:56:24 +1100 Subject: [PATCH 1/6] WebKit CSS3 carousel transforms for supported devices --- less/carousel.less | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/less/carousel.less b/less/carousel.less index 6f5023756d..9a374a4476 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; + } + } + } +} From 8ab6746cbe567029400e0a50bff696599f358038 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Sat, 15 Mar 2014 18:30:09 +1100 Subject: [PATCH 2/6] Utilised mixins rather than specific WebKit properties --- dist/css/bootstrap.css | 41 +++++++++++++++++++++++++++++++++++++++++ less/carousel.less | 12 ++++++------ 2 files changed, 47 insertions(+), 6 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 132bffa622..5b2afc0f79 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5776,6 +5776,47 @@ button.close { bottom: 20px; } } +@media all and (-webkit-transform-3d) { + .carousel .item { + -webkit-transition: -webkit-transform .6s ease-in-out; + -o-transition: -o-transform .6s ease-in-out; + transition: transform .6s ease-in-out; + + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + } + .carousel .item.next, + .carousel .item.active.right { + left: 0; + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + .carousel .item.prev, + .carousel .item.active.left { + left: 0; + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + .carousel .item.next.left, + .carousel .item.prev.right, + .carousel .item.active { + left: 0; + -webkit-transform: translate3d(0%, 0, 0); + -ms-transform: translate3d(0%, 0, 0); + -o-transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); + } +} .clearfix:before, .clearfix:after, .dl-horizontal dd:before, diff --git a/less/carousel.less b/less/carousel.less index 9a374a4476..1714abdec3 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; } } From bab63abee80eb2ceaa0c96b6417dde6baefa4718 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Sun, 16 Mar 2014 17:07:55 +1100 Subject: [PATCH 3/6] Removed unnecessary percentage sign for 3D translation --- dist/css/bootstrap.css | 8 ++++---- less/carousel.less | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 5b2afc0f79..e80aa63c98 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5811,10 +5811,10 @@ button.close { .carousel .item.prev.right, .carousel .item.active { left: 0; - -webkit-transform: translate3d(0%, 0, 0); - -ms-transform: translate3d(0%, 0, 0); - -o-transform: translate3d(0%, 0, 0); - transform: translate3d(0%, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } .clearfix:before, diff --git a/less/carousel.less b/less/carousel.less index 1714abdec3..0d081928e5 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; } } From 4fa2d9e0ca3e3dcfc0db46329e2213550961ea7f Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Wed, 23 Apr 2014 20:36:49 +1000 Subject: [PATCH 4/6] Improved mixin ability with nested media query --- dist/css/bootstrap.css | 82 +++++++++++++++++++++--------------------- less/carousel.less | 42 ++++++++++------------ 2 files changed, 60 insertions(+), 64 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index e80aa63c98..faff04314e 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5610,6 +5610,47 @@ button.close { .carousel-inner > .item > a > img { line-height: 1; } +@media all and (-webkit-transform-3d) { + .carousel-inner > .item { + -webkit-transition: -webkit-transform .6s ease-in-out; + -o-transition: -o-transform .6s ease-in-out; + transition: transform .6s ease-in-out; + + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + } + .carousel-inner > .item.next, + .carousel-inner > .item.active.right { + left: 0; + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + .carousel-inner > .item.prev, + .carousel-inner > .item.active.left { + left: 0; + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + .carousel-inner > .item.next.left, + .carousel-inner > .item.prev.right, + .carousel-inner > .item.active { + left: 0; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { @@ -5776,47 +5817,6 @@ button.close { bottom: 20px; } } -@media all and (-webkit-transform-3d) { - .carousel .item { - -webkit-transition: -webkit-transform .6s ease-in-out; - -o-transition: -o-transform .6s ease-in-out; - transition: transform .6s ease-in-out; - - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - -o-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-perspective: 1000; - -ms-perspective: 1000; - -o-perspective: 1000; - perspective: 1000; - } - .carousel .item.next, - .carousel .item.active.right { - left: 0; - -webkit-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - -o-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - .carousel .item.prev, - .carousel .item.active.left { - left: 0; - -webkit-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - -o-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - .carousel .item.next.left, - .carousel .item.prev.right, - .carousel .item.active { - left: 0; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} .clearfix:before, .clearfix:after, .dl-horizontal dd:before, diff --git a/less/carousel.less b/less/carousel.less index 0d081928e5..ea3cade88e 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; - } - } - } -} From d6d8e204e6fac2fbe77b91dd50c30bc0f2d472e4 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Mon, 7 Jul 2014 12:20:06 +1000 Subject: [PATCH 5/6] Added Firefox support for CSS3 carousel transition --- less/carousel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/carousel.less b/less/carousel.less index ea3cade88e..0cd7dc68e0 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); From 30d1236a1d80dc085cd7925e64618a65300e0c03 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Tue, 8 Jul 2014 09:49:08 +1000 Subject: [PATCH 6/6] CSS3 Carousel code formatting --- less/carousel.less | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/less/carousel.less b/less/carousel.less index 0cd7dc68e0..671d709df8 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; }