Plane 3d is now visible

src/App.svelte

@@ -28,6 +28,12 @@
   <Parallax sections={10} config={{stiffness: 0.2, damping: 0.3}}>
     <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
 
+    <StickyLayer offset={{ top: 0, bottom: 10 }} class="no-interact">
+      <div>
+        {scrollPos}
+      </div>
+    </StickyLayer>
+
     <StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
       <div class="horizontal" style="padding: 200px;">    
         <ZSpacer/>
@@ -35,44 +41,16 @@
       </div>
     </StickyLayer>
 
-    <StickyLayer class="align-center" offset={{ top: 0, bottom: 6.5 }}>
+    <StickyLayer class="align-center no-interact" offset={{ top: 0, bottom: 6.5 }}>
       <WeAreText/>
     </StickyLayer>
 
-    <StickyLayer offset={{ top: 0, bottom: 10 }}>
+    <StickyLayer class="no-interact" offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
-      <div>
-        {scrollPos}
-      </div>
-    </StickyLayer>
-
-    <StickyLayer offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
       <div class="align-center" style="font-size: 100px; padding-top: 200px;">
         The deprived devs
       </div>
     </StickyLayer>
   </Parallax>
-
-  <!-- 
-  <ScrollTextComponent />
-  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
-    <ParallaxLayer rate={0} span={3} style="background-color: orange;" />
-  
-    <ParallaxLayer rate={-0.5}>
-      <img src={StartVideo} alt="Start video on main screen"/>
-    </ParallaxLayer>
-  
-    <ParallaxLayer rate={1} offset={1.75}>
-      <img src='bird.jpg' alt='a bird'>
-    </ParallaxLayer>
-  
-    <StickyLayer offset={{ top: 0.5, bottom: 2 }}>
-      <p>A description of a horse and a bird.</p>
-    </StickyLayer>
-  
-    <ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
-  </Parallax>
-  -->
-
 </main>
 
 <style>

src/lib/Cube3D.svelte

@@ -78,21 +78,26 @@
         --cube-color: rgba(125, 125, 125, 1);
     }
 
+    #planeHolder {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        transform-style: preserve-3d;
+    }
+
     #plane3D {
         --plane-size: 2500px;
 
         width: var(--plane-size);
         height: var(--plane-size);
 
-    position: absolute;
-
         transform: 
             rotateX( -90deg ) 
-        translateZ(calc(var(--plane-size) * 2))
+            translateZ(calc(var(--plane-size) * -0.25))
             translateX(calc(var(--plane-size) * -0.45));
         -moz-transform: 
             rotateX( -90deg ) 
-        translateZ(calc(var(--plane-size) * 2))
+            translateZ(calc(var(--plane-size) * -0.25))
             translateX(calc(var(--plane-size) * -0.45));
     }
 
@@ -170,7 +175,12 @@
 </style>
 
 <div id="cube-3d-container">
-    <div id="cube3d" style="transform: rotateX({cubeRotY - cubeRotX}deg)">
+    <!-- Empty div for origin of plane object -->
+    <div id="planeHolder" style="transform: rotateX({cubeRotX}deg);">
+        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
+    </div>
+
+    <div id="cube3d" style="transform: rotateX({cubeRotY + cubeRotX}deg)">
         <div id="front" class="cube-sides">
             <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
             <p class="text" style="position: relative;">
@@ -212,10 +222,4 @@
         
 
     </div>
-
-    <!-- Empty div for origin of plane object -->
-    <div style="transform: rotateX(5deg);">
-        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
-    </div>
-
 </div>