Minor changes

src/lib/Cube3D.css

@@ -0,0 +1,86 @@
+/* .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) );
+} */