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; - } - } - } -}