Merge pull request #13074 from haydenbleasel/master

WebKit CSS3 carousel transforms for supported devices
2014-08-02 18:40:21 -07:00 · 2014-08-02 18:40:21 -07:00 · c7970106a2
commit c7970106a2
parent 033f1654b0 30d1236a1d
2 changed files with 65 additions and 0 deletions
--- 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,