Added forward and backward effects

index.html

@@ -78,6 +78,8 @@ <h2>2D Transitions</h2>
 				<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 {