调整立方体的大小 [英] Re-sizing a cube
本文介绍了调整立方体的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从使用CSS创建的多维数据集中有一组代码。
但是，如何将其调整为更大的多维数据集（例如200px）？我已经尝试过了，但是每次尝试都做不到。.
.mainDiv {位置：相对；宽度：206px；高度：190px；保证金：0px自动; margin-top：100px;}。square {width：100px;高度：100px；背景：＃c52329;边框：实心2px #FFF；转换：偏斜（180deg，210deg）;位置：绝对； top：43px;}。square2 {width：100px;高度：100px；背景：＃c52329;边框：实心2px #FFF；转换：偏斜（180deg，150deg）;位置：绝对；左：102px； top：43px;}。square3 {width：114px;高度：100px；背景：＃c52329;边框：实心2px #FFF；变换：旋转（150deg）转换（-40px，-16px）偏斜（30deg，0deg）;位置：绝对；左：0px； top：-32px;}
< div class = mainDiv> < div class = square>< / div> < div class = square2>< / div> < div class = square3>< / div>< / div>
解决方案
您可以先通过减少代码并删除一些固定值来调整代码以使形状更容易，然后只需将主元素的大小更改为使立方体变大或变小：
* {框-sizing：border-box;}。mainDiv {位置：相对；宽度：200像素；高度：100px；边距：120px自动0; font-size：0; } .mainDiv> * {背景：＃c52329; border：solid 2px #FFF;}。square，.square2 {width：50％;高度：100％; display：inline-block;}。square {transform-origin：top top; transform：skewY（30deg）;}。square2 {transform-origin：top top; transform：skewY（-30deg）;}。square3 {width：calc（50％* 1.14）;高度：100％;变换：旋转（-30deg）偏斜X（30deg）;位置：绝对； transform-origin：左上方； 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 {位置：相对； --d：50px;宽度：calc（var（-d）* 1.73 * var（-s，1））; / * x sqrt（3）* /高度：calc（var（-d）* var（-s，1））; margin：calc（var（-d）* var（-s，1））auto;}。mainDiv：before，.mainDiv：after {content：;宽度：50％;高度：100％;背景：线性渐变（＃c52329，＃c52329）中心/ calc（100％-4px）calc（100％-4px）不重复，＃fff； display：inline-block;}。mainDiv：before {transform-origin：top top; transform：skewY（30deg）;}。mainDiv：after {transform-origin：右上；转换：skewY（-30deg）;}。mainDiv> div {位置：绝对；宽度：calc（50％* 1.154）; / * x（1 / cos（30））* / padding-top：50％;变换：旋转（-30deg）偏斜X（30deg）;背景：线性渐变（＃c52329，＃c52329）中心/ calc（100％-4px）calc（100％-4px）不重复，＃fff；最高：0; transform-origin：左上方；}
< div类= 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，最后您将只包含一个元素：
< pre class = snippet-code-css lang-css prettyprint-override>
.mainDiv {position：relative; --d：50px;宽度：calc（var（-d）* 1.73 * var（-s，1））;高度：calc（var（-d）* var（-s，1））;保证金：0 auto calc（var（-d）* var（-s，1））;背景：线性渐变（到左下，＃c52329 47％，透明48.5％）左下，线性渐变（到右下，＃c52329 47％，透明48.5％）右下，线性渐变（到左上， ＃c52329 47％，透明48.5％）左上方，线性渐变（右上方，＃c52329 47％，透明48.5％）右上方；背景大小：50.5％50.5％;背景重复：不重复； } .mainDiv：before，.mainDiv：after {content：;宽度：50％;高度：100％;背景：线性渐变（＃c52329，＃c52329）中心/ calc（100％-4px）calc（100％-4px）不重复，＃fff； display：inline-block ;;}。mainDiv：before {transform-origin：top left; transform：skewY（30deg）translationY（50％）;}。mainDiv：after {transform-origin：top right; transform：skewY（-30deg）translationY（50％）;}
< div class = mainDiv>< / div>< div class = mainDiv style =-s：1.5>< / div>< div class = mainDiv样式=-s：2>< / div>< div class = mainDiv style =-s：3< / div>
I have a set of codes from the cube created using CSS.
However, how do I resize this into a bigger cube (for example, 200px)? I have tried but everytime I try doing it, it goes out of position..
.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>
解决方案
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>
这篇关于调整立方体的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
