sync

src/lib/Cube3D.css

@@ -1,86 +0,0 @@
-/* .rotate1{
-  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-} */
-/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
-
-#cube-3d-container {
-  width: var(--cube-size);
-  height: var(--cube-size);
-  position: relative;
-  perspective: 500px;
-  -moz-perspective: 1000px;
-  padding: 25px;
-}
-
-#cube3d {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  transform-style: preserve-3d;
-  transition: transform 1s cubic-bezier(0,1.32,0,.92);
-}
-
-#cube3d div {
-  display: block;
-  border: none;
-  line-height: var(--cube-size);
-  text-align: center;
-  font-size: 65px;
-}
-
-.cube-sides {
-  position: absolute;
-  width: var(--cube-size);
-  height: var(--cube-size);
-
-  text-decoration: underline;
-  text-underline-offset: 24px;
-}
-
-/* #front {
-} */
-/*
-#back {
-  background: var(--cube-color);
-}
-
-#right {
-  background: var(--cube-color);
-}
-
-#left {
-  background: var(--cube-color);
-}
-
-#top {
-  background: var(--cube-color);
-}
-
-#bottom {
-  background: var(--cube-color);
-} */
-
-#cube3d #front  {
-  transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
-  -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
-}
-#cube3d #back {
-  transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
-  -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
-}
-#cube3d #right  {
-  transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-  -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-}
-#cube3d #left   {
-  transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-  -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-}
-/* #cube3d #top    {
-  transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-  -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-}
-#cube3d #bottom {
-  transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-  -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-} */

src/lib/Cube3D.svelte

@@ -73,8 +73,6 @@
 <svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
 
 <style>
-  @import './Cube3D.css';
-
     :root {
         --cube-size: 400px;
         --cube-color: rgba(125, 125, 125, 1);
@@ -90,11 +88,11 @@
 
     transform: 
         rotateX( -90deg ) 
-        translateZ(calc(var(--plane-size) * -0.34))
+        translateZ(calc(var(--plane-size) * 2))
         translateX(calc(var(--plane-size) * -0.45));
     -moz-transform: 
         rotateX( -90deg ) 
-        translateZ(calc(var(--plane-size) * -0.34))
+        translateZ(calc(var(--plane-size) * 2))
         translateX(calc(var(--plane-size) * -0.45));
     }
 
@@ -105,10 +103,74 @@
     .text{
         margin: 0;
     }
+
+    /* .rotate1{
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+} */
+/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
+
+#cube-3d-container {
+  width: var(--cube-size);
+  height: var(--cube-size);
+  position: relative;
+  perspective: 500px;
+  -moz-perspective: 1000px;
+  padding: 25px;
+}
+
+#cube3d {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  transition: transform 1s cubic-bezier(0,1.32,0,.92);
+}
+
+#cube3d div {
+  display: block;
+  border: none;
+  line-height: var(--cube-size);
+  text-align: center;
+  font-size: 65px;
+}
+
+.cube-sides {
+  position: absolute;
+  width: var(--cube-size);
+  height: var(--cube-size);
+
+  text-decoration: underline;
+  text-underline-offset: 24px;
+}
+
+#cube3d #front  {
+  transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #back {
+  transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+  -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+}
+#cube3d #right  {
+  transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #left   {
+  transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+/* #cube3d #top    {
+  transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #bottom {
+  transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+} */
 </style>
 
 <div id="cube-3d-container">
-    <div id="cube3d"style="transform: rotateY({cubeRotY}deg) rotateX({cubeRotX}deg);">
+    <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;">
@@ -149,6 +211,10 @@
 
         
 
+    </div>
+
+    <!-- Empty div for origin of plane object -->
+    <div style="transform: rotateX(5deg);">
         <img id="plane3D" src={planeImg} alt="3D ground plane"/>
     </div>