diff --git a/src/App.svelte b/src/App.svelte index 8b85c6e..ee8657f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -28,6 +28,12 @@ + +
+ {scrollPos} +
+
+
@@ -35,47 +41,19 @@
- + - -
- {scrollPos} -
-
- - +
The deprived devs
- - - diff --git a/src/lib/Cube3D.svelte b/src/lib/Cube3D.svelte index 13bbe2d..0822497 100644 --- a/src/lib/Cube3D.svelte +++ b/src/lib/Cube3D.svelte @@ -78,22 +78,27 @@ --cube-color: rgba(125, 125, 125, 1); } - #plane3D { - --plane-size: 2500px; + #planeHolder { + width: 100%; + height: 100%; + position: absolute; + transform-style: preserve-3d; + } - width: var(--plane-size); - height: var(--plane-size); + #plane3D { + --plane-size: 2500px; - position: absolute; + width: var(--plane-size); + height: var(--plane-size); - transform: - rotateX( -90deg ) - translateZ(calc(var(--plane-size) * 2)) - translateX(calc(var(--plane-size) * -0.45)); - -moz-transform: - rotateX( -90deg ) - translateZ(calc(var(--plane-size) * 2)) - translateX(calc(var(--plane-size) * -0.45)); + transform: + rotateX( -90deg ) + translateZ(calc(var(--plane-size) * -0.25)) + translateX(calc(var(--plane-size) * -0.45)); + -moz-transform: + rotateX( -90deg ) + translateZ(calc(var(--plane-size) * -0.25)) + translateX(calc(var(--plane-size) * -0.45)); } .image { @@ -170,7 +175,12 @@
-
+ +
+ 3D ground plane +
+ +
cube side texture

@@ -212,10 +222,4 @@

- - -
- 3D ground plane -
-
\ No newline at end of file