diff --git a/demo/src/sandboxes/parallax/src/styles.module.css b/demo/src/sandboxes/parallax/src/styles.module.css
index 726da2241c..a591b9b28e 100644
--- a/demo/src/sandboxes/parallax/src/styles.module.css
+++ b/demo/src/sandboxes/parallax/src/styles.module.css
@@ -20,7 +20,6 @@
 .number span {
   display: inline-block;
   position: relative;
-  transform: translate3d(-35%, 0, 0);
 }
 
 .slopeBegin {
diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx
index c3df4756f5..586a31d425 100644
--- a/packages/parallax/src/index.tsx
+++ b/packages/parallax/src/index.tsx
@@ -24,6 +24,7 @@ export interface IParallaxLayer {
 
 export interface IParallax {
   config: ConfigProp
+  horizontal: boolean
   busy: boolean
   space: number
   offset: number
@@ -101,8 +102,12 @@ export const ParallaxLayer = React.memo(
         }
       })
 
+      // Layer's horizontal defaults to parent's horizontal if not set.
+      const scrollHorizontal =
+        horizontal === undefined ? parent.horizontal : horizontal
+
       const translate3d = ctrl.springs.translate.to(
-        horizontal
+        scrollHorizontal
           ? x => `translate3d(${x}px,0,0)`
           : y => `translate3d(0,${y}px,0)`
       )
@@ -115,8 +120,8 @@ export const ParallaxLayer = React.memo(
             backgroundSize: 'auto',
             backgroundRepeat: 'no-repeat',
             willChange: 'transform',
-            [horizontal ? 'height' : 'width']: '100%',
-            [horizontal ? 'width' : 'height']: ctrl.springs.space,
+            [scrollHorizontal ? 'height' : 'width']: '100%',
+            [scrollHorizontal ? 'width' : 'height']: ctrl.springs.space,
             WebkitTransform: translate3d,
             msTransform: translate3d,
             transform: translate3d,
@@ -155,6 +160,7 @@ export const Parallax = React.memo(
     const state: IParallax = useMemoOne(
       () => ({
         config,
+        horizontal,
         busy: false,
         space: 0,
         current: 0,