WebKit CSS3 carousel transforms for supported devices

da044d9c · Hayden Bleasel · 6d882a64 · da044d9c
Commit da044d9c authored 11 years ago by Hayden Bleasel
Hide whitespace changes
Inline Side-by-side

Showing

with 23 additions and 0 deletions
+23 -0
--- 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;
+      }
+    }
+  }
+}