调整大小的立方体

Question

我有一组从立方体的代码使用CSS创建。

但是，我怎么调整这个成一个更大的立方体（例如，200像素）？我曾经试过，但每次我尝试这样做，它超出位置..

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

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

Answer 1

您可以先调整你的代码通过减少代码，并移除一些固定的值，那么你只需要改变的主要元素的大小，以使立方体大或变小，使造型更加容易：

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

您也可以使用伪元素降低了代码，并引入CSS变量的大小来控制：

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

你甚至可以依靠某些渐变作为背景，以创建形状的一个组成部分，取下内部DIV减少更多的代码，你将只在最后一个元素：

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

Answer 2

在简单的解决方案是扩大主容器了。你可以尝试用价值发挥到实现所需的大小和位置。

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