Re-sizing a cube

You may first adjust your code to make the shape easier by reducing the code and removing some fixed values then you only need to change the size of the main element to make the cube bigger or smaller:

* {
  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;
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>
<div class="mainDiv" style="width:100px;height:50px;">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

<div class="mainDiv" style="width:400px;height:200px;">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

You can also reduce the code using pseudo-element and introduce CSS variable to control the size:

.mainDiv {
  position: relative;
  --d:50px;
  width: calc(var(--d) * 1.73 * var(--s, 1)); /* x sqrt(3) */
  height: calc(var(--d) * var(--s, 1));
  margin: calc(var(--d) * var(--s, 1)) auto;
}

.mainDiv:before,
.mainDiv:after {
  content: "";
  width: 50%;
  height: 100%;
  background: 
    linear-gradient(#c52329,#c52329) center/calc(100% - 4px) calc(100% - 4px) no-repeat,
    #fff;
  display: inline-block;
}

.mainDiv:before {
  transform-origin: top left;
  transform: skewY(30deg);
}

.mainDiv:after {
  transform-origin: top right;
  transform: skewY(-30deg);
}

.mainDiv>div {
  position: absolute;
  width: calc(50% * 1.154); /* x (1/cos(30)) */
  padding-top:50%;
  transform: rotate(-30deg) skewX(30deg);
  background: 
    linear-gradient(#c52329,#c52329) center/calc(100% - 4px) calc(100% - 4px) no-repeat,
    #fff;
  top: 0;
  transform-origin: top left;
}

<div class="mainDiv" style="--s:0.5"><div></div></div>

<div class="mainDiv"><div></div></div>

<div class="mainDiv" style="--s:1.5"><div></div></div>

<div class="mainDiv" style="--s:2"><div></div></div>

<div class="mainDiv" style="--s:3"><div></div></div>

You can even reduce more the code by relying on some gradient as background to create one part of the shape and remove the inner div and you will only have one element at the end:

.mainDiv {
  position: relative;
  --d:50px;
  width: calc(var(--d) * 1.73 * var(--s,1));
  height: calc(var(--d) * var(--s,1));
  margin: 0 auto calc(var(--d) * var(--s,1));
  background:
   linear-gradient(to bottom left,#c52329 47%,transparent 48.5%) bottom left,
   linear-gradient(to bottom right,#c52329 47%,transparent 48.5%) bottom right,
   linear-gradient(to top left,#c52329 47%,transparent 48.5%) top left,
   linear-gradient(to top right,#c52329 47%,transparent 48.5%) top right;
  background-size:50.5% 50.5%;
  background-repeat:no-repeat;
   
}

.mainDiv:before,
.mainDiv:after{
  content:"";
  width:50%;
  height: 100%;
  background: 
    linear-gradient(#c52329,#c52329) center/calc(100% - 4px) calc(100% - 4px) no-repeat,
    #fff;
  display:inline-block;;
}
.mainDiv:before {
  transform-origin:top left;
  transform:skewY(30deg) translateY(50%);
}
.mainDiv:after {
  transform-origin:top right;
  transform:skewY(-30deg) translateY(50%);
}

<div class="mainDiv"></div>

<div class="mainDiv" style="--s:1.5"></div>

<div class="mainDiv" style="--s:2"></div>

<div class="mainDiv" style="--s:3"></div>

The easier solution is to scale main container up. You can try to play with values to achieve desired size and position.

.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;
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

Re-sizing a cube

Tags:

Html

Css

Css Shapes

Css Transforms

Related

Recent Posts