Added forward and backward effects

css/hover.css

@@ -1154,6 +1154,40 @@
   animation-iteration-count: 1;
 }
 
+/* Forward */
+.hvr-forward {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+}
+.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
+  -webkit-transform: translateX(8px);
+  transform: translateX(8px);
+}
+
+/* Backward */
+.hvr-backward {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+}
+.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active {
+  -webkit-transform: translateX(-8px);
+  transform: translateX(-8px);
+}
+
 /* BACKGROUND TRANSITIONS */
 /* Fade */
 .hvr-fade {

index.html

@@ -78,6 +78,8 @@
 				<a href="#" class="hvr-wobble-skew">Wobble Skew</a>
 				<a href="#" class="hvr-buzz">Buzz</a>
 				<a href="#" class="hvr-buzz-out">Buzz Out</a>
+				<a href="#" class="hvr-forward">Forward</a>
+				<a href="#" class="hvr-backward">Backward</a>
 
 
 				<h2>Background Transitions</h2>

less/effects/2d-transitions/_backward.less

@@ -0,0 +1,12 @@
+/* Backward */
+.backward() {
+	.hacks();
+	.prefixed(transition-duration, @mediumDuration);
+	.prefixed(transition-property, transform);
+
+	&:hover,
+	&:focus,
+	&:active {
+		.prefixed(transform, translateX(-8px));
+	}
+}

less/effects/2d-transitions/_forward.less

@@ -0,0 +1,12 @@
+/* Forward */
+.forward() {
+	.hacks();
+	.prefixed(transition-duration, @mediumDuration);
+	.prefixed(transition-property, transform);
+
+	&:hover,
+	&:focus,
+	&:active {
+		.prefixed(transform, translateX(8px));
+	}
+}

less/hover.less

@@ -207,6 +207,20 @@
 	}
 }
 
+@import "effects/2d-transitions/_forward";
+& when(@includeClasses = true) {
+	.@{nameSpace}-forward {
+	    .forward();
+	}
+}
+
+@import "effects/2d-transitions/_backward";
+& when(@includeClasses = true) {
+	.@{nameSpace}-backward {
+	    .backward();
+	}
+}
+
 /* BACKGROUND TRANSITIONS */
 @import "effects/background-transitions/_fade";
 & when(@includeClasses = true) {

scss/effects/2d-transitions/_backward.scss

@@ -0,0 +1,12 @@
+/* Backward */
+@mixin backward {
+	@include hacks();
+	@include prefixed(transition-duration, $mediumDuration);
+	@include prefixed(transition-property, transform);
+
+	&:hover,
+	&:focus,
+	&:active {
+		@include prefixed(transform, translateX(-8px));
+	}
+}

scss/effects/2d-transitions/_forward.scss

@@ -0,0 +1,12 @@
+/* Forward */
+@mixin forward {
+	@include hacks();
+	@include prefixed(transition-duration, $mediumDuration);
+	@include prefixed(transition-property, transform);
+
+	&:hover,
+	&:focus,
+	&:active {
+		@include prefixed(transform, translateX(8px));
+	}
+}

scss/hover.scss

@@ -206,6 +206,20 @@
 	}
 }
 
+@import "effects/2d-transitions/forward";
+@if $includeClasses {
+	.#{$nameSpace}-forward {
+		@include forward();
+	}
+}
+
+@import "effects/2d-transitions/backward";
+@if $includeClasses {
+	.#{$nameSpace}-backward {
+		@include backward();
+	}
+}
+
 /* BACKGROUND TRANSITIONS */
 @import "effects/background-transitions/fade";
 @if $includeClasses {