diff options
| author | Mark Otto <[email protected]> | 2014-08-02 18:40:21 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-08-02 18:40:21 -0700 |
| commit | c7970106a2c8edaac46b7bfa4e02aed10971a400 (patch) | |
| tree | 49912e2a70c9e675c0da4ddfcaa2eca08395ffed | |
| parent | 033f1654b07f7764a54e5b290e5cf36f688b95a3 (diff) | |
| parent | 30d1236a1d80dc085cd7925e64618a65300e0c03 (diff) | |
| download | bootstrap-c7970106a2c8edaac46b7bfa4e02aed10971a400.tar.xz bootstrap-c7970106a2c8edaac46b7bfa4e02aed10971a400.zip | |
Merge pull request #13074 from haydenbleasel/master
WebKit CSS3 carousel transforms for supported devices
| -rw-r--r-- | dist/css/bootstrap.css | 41 | ||||
| -rw-r--r-- | less/carousel.less | 24 |
2 files changed, 65 insertions, 0 deletions
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 9adfa9f5b..91c3010b2 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5793,6 +5793,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 { diff --git a/less/carousel.less b/less/carousel.less index 1644ddf7f..c11470142 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -24,6 +24,30 @@ &:extend(.img-responsive); line-height: 1; } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-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, |