root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #13074 from haydenbleasel/master 

WebKit CSS3 carousel transforms for supported devices
This commit is contained in:
Mark Otto 2014-08-02 18:40:21 -07:00
parent 033f1654b0 30d1236a1d
commit c7970106a2
2 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dist/css/bootstrap.css vendored
View File

@ -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 {

24
less/carousel.less
View File

@ -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,