重新调整立方体的大小答案

【问题标题】：Re-sizing a cube重新调整立方体的大小
【发布时间】：2019-01-05 19:19:27
【问题描述】：

我有一组来自使用 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>

【问题讨论】：

标签： html css css-transforms css-shapes

【解决方案1】：

更简单的解决方案是扩大主容器的规模。您可以尝试使用值来实现所需的大小和位置。

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

【讨论】：

所以如果我希望立方体具有一定的尺寸（例如 150px x 150px），我应该为这个解决方案更改哪些元素？
transform: scale(2) translate(5px, 70px); 缩放和翻译

【解决方案2】：

您可以先通过减少代码并删除一些固定值来调整代码以使形状更容易，然后您只需更改主元素的大小即可使立方体变大或变小：

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

【讨论】：