save

app.js

@@ -4,8 +4,13 @@ function vw(v) {
   return (v * w) / 100;
 }
 
-for (var i = 0; i < 10; i++) {
+for (let i = 0; i < 0; i++) {
-    document.getElementsByClassName('cube__face')[i].style.transform = 'rotateX('+i*36+'deg) translateZ(calc(3.4vw *'Math.tan(18* Math.PI / 180)')';
+    console.log(i);
+    for (var j = 0; j < 3; j++) {
+        console.log(j);
+        document.getElementsByClassName('cube__face--'+i)[j].style.transform = 'rotateX('+(i*36)+'deg) translateZ(calc(1.6vw /'+Math.tan(18* Math.PI / 180)+')';
+    }
+
 }
 
 

master.css

@@ -48,7 +48,7 @@
     left: 51.5%;
 }
 
-.cube__face--0  { transform: rotateX(  0deg) translateZ(74px); }
+/* .cube__face--0  { transform: rotateX(  0deg) translateZ(74px); }
 .cube__face--1  { transform: rotateX( 36deg) translateZ(74px); }
 .cube__face--2  { transform: rotateX( 72deg) translateZ(74px); }
 .cube__face--3  { transform: rotateX(108deg) translateZ(74px); }
@@ -57,4 +57,4 @@
 .cube__face--6  { transform: rotateX(216deg) translateZ(74px); }
 .cube__face--7  { transform: rotateX(252deg) translateZ(74px); }
 .cube__face--8  { transform: rotateX(288deg) translateZ(74px); }
-.cube__face--9  { transform: rotateX(324deg) translateZ(74px); }
+.cube__face--9  { transform: rotateX(324deg) translateZ(74px); } */