diff --git a/src/components/_cards.scss b/src/components/_cards.scss
index 809b522..0ee1e11 100644
--- a/src/components/_cards.scss
+++ b/src/components/_cards.scss
@@ -5,6 +5,8 @@
   flex-direction: column;
   word-wrap: break-word;
   border: 2px solid $muted-light;
+  backface-visibility: hidden;
+  will-change: transform;
 
   &:hover {
     @include shadow(hover);
diff --git a/src/core/_config.scss b/src/core/_config.scss
index 05139da..4e1c193 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -170,10 +170,23 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
   }
 }
 
-@mixin translate($x, $y) {
-  -webkit-transform: translate($x, $y);
-  -ms-transform: translate($x, $y);
-  transform: translate($x, $y);
+/*
+  Add transform: translate() with browser prefixes.
+  Same syntax for translate() and translate3d()
+  To get 3D add a $z value and set 'true'
+  @param string | boolean
+  @default 0 | false
+*/
+@mixin translate($x, $y, $z: 0, $transform3d: false) {
+  @if $transform3d {
+    -webkit-transform: translate3d($x, $y, $z);
+    -ms-transform: translate3d($x, $y, $z);
+    transform: translate3d($x, $y, $z);
+  } @else {
+    -webkit-transform: translate($x, $y);
+    -ms-transform: translate($x, $y);
+    transform: translate($x, $y);
+  }
 }
 
 /*
@@ -196,7 +209,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 @mixin shadow($type: regular) {
   @if $type == hover {
     box-shadow: $shadow-hover;
-    @include translate(0, 2px);
+    @include translate(0, 2px, 0, true);
   } @else if $type == small {
     @include transition($animation: ease);
     box-shadow: $shadow-small;