我有一组从立方体的代码使用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>
您可以先调整你的代码通过减少代码,并移除一些固定的值,那么你只需要改变的主要元素的大小,以使立方体大或变小,使造型更加容易:
* {
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>
在简单的解决方案是扩大主容器了。你可以尝试用价值发挥到实现所需的大小和位置。
.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>