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 /dist/css/bootstrap.css | |
| 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
Diffstat (limited to 'dist/css/bootstrap.css')
| -rw-r--r-- | dist/css/bootstrap.css | 41 |
1 files changed, 41 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 { |