WebKit CSS3 carousel transforms for supported devices

1 files changed, 23 insertions, 0 deletions

diff --git a/less/carousel.less b/less/carousel.less
index 6f5023756..9a374a447 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -230,3 +230,26 @@
     bottom: 20px;
   }
 }
+
+// WebKit CSS3 transforms for supported devices
+@media all and (-webkit-transform-3d) {
+  .carousel {
+    .item {
+      -webkit-transition: 0.6s -webkit-transform ease-in-out;
+      -webkit-backface-visibility: hidden;
+      -webkit-perspective: 1000;
+      &.next, &.active.right {
+        -webkit-transform: translate3d(100%,0,0);
+        left: 0;
+      }
+      &.prev, &.active.left {
+        -webkit-transform: translate3d(-100%,0,0);
+        left: 0;
+      }
+      &.next.left, &.prev.right, &.active {
+        -webkit-transform: translate3d(0%,0,0);
+        left: 0;
+      }
+    }
+  }
+}