Redimensionar un cubo

Tengo un conjunto de códigos del cubo creado usando CSS.

Sin embargo, ¿cómo redimensiono esto en un cubo más grande (por ejemplo, 200px)? Lo he intentado pero cada vez que lo bash, sale de posición …

.mainDiv { position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top: 100px; } .square { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 210deg); position: absolute; top: 43px; } .square2 { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 150deg); position: absolute; left: 102px; top: 43px; } .square3 { width: 114px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg); position: absolute; left: 0px; top: -32px; } 
 

Primero puede ajustar su código para facilitar la forma reduciendo el código y eliminando algunos valores fijos, luego solo necesita cambiar el tamaño del elemento principal para hacer que el cubo sea más grande o más pequeño:

 * { box-sizing:border-box; } .mainDiv { position: relative; width: 200px; height: 100px; margin: 120px auto 0; font-size:0; } .mainDiv > * { background: #c52329; border: solid 2px #FFF; } .square, .square2{ width: 50%; height: 100%; display:inline-block; } .square { transform-origin:top left; transform:skewY(30deg); } .square2 { transform-origin:top right; transform:skewY(-30deg); } .square3 { width: calc(50% * 1.14); height: 100%; transform: rotate(-30deg) skewX(30deg); position: absolute; transform-origin:top left; top:0; } 
 

La solución más fácil es ampliar el contenedor principal. Puedes intentar jugar con valores para lograr el tamaño y la posición deseados.

 .mainDiv { position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top: 100px; transform: scale(2) translate(5px, 70px); } .square { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 210deg); position: absolute; top: 43px; } .square2 { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 150deg); position: absolute; left: 102px; top: 43px; } .square3 { width: 114px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg); position: absolute; left: 0px; top: -32px; }