重新调整立方体的大小

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

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

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

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

重新调整立方体的大小

Re-sizing a cube

html

css

css-transforms

css-shapes