源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器中包含一组3个面：
<divclass="brick">
<divclass="sides">
<spanclass='front'></span>
<spanclass='right'></span>
<spanclass="top"></span>
</div>
</div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circleatcenter,white,skyblue);
}
定义容器尺寸：
.brick{
width:40em;
height:30em;
font-size:10px;
}
画出积木的正面：
.brick{
position:relative;
}
.sides.front{
position:absolute;
width:9em;
height:6.8em;
background-color:#237fbd;
top:19em;
left:7em;
}
画出积木的右面：
.sides>*{
position:absolute;
background-color:#237fbd;
}
.sides.right{
width:18em;
height:6.8em;
filter:brightness(0.8);
top:19em;
left:calc(7em+9em);
}
画出积木的顶面：
.sides.top{
width:18em;
height:10.4em;
filter:brightness(1.2);
top:calc(19em-10.4em);
left:calc(7em+9em);
}
把以上3个面组合成立方体：
.sides.front{
transform-origin:right;
transform:skewY(30deg);
}
.sides.right{
transform-origin:left;
transform:skewY(-30deg);
}
.sides.top{
transform-origin:leftbottom;
transform:rotate(-60deg)skewY(30deg);
}
接下来画积木的凸粒。
在dom中增加8个凸粒元素：
<divclass="brick">
<divclass="sides">
<spanclass='front'></span>
<spanclass='right'></span>
<spanclass="top"></span>
</div>
<divclass="studs">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
定义变量：
.studsspan:nth-child(1){
--n:1;
}
.studsspan:nth-child(3){
--n:3;
}
.studsspan:nth-child(5){
--n:5;
}
.studsspan:nth-child(7){
--n:7;
}
.studsspan:nth-child(2){
--n:2;
}
.studsspan:nth-child(4){
--n:4;
}
.studsspan:nth-child(6){
--n:6;
}
.studsspan:nth-child(8){
--n:8;
}
画出左侧的凸粒：
.studsspan:nth-child(odd){
top:calc(4.6em+(var(--n)-1)/2*2.6em);
left:calc(23.3em-(var(--n)-1)/2*4.6em);
}
画出右侧的凸粒：
.studsspan:nth-child(even){
top:calc(6.9em+(var(--n)-2)/2*2.6em);
left:calc(27.9em-(var(--n)-2)/2*4.6em);
}
最后，画出凸粒的顶面：
.studsspan::before{
content:'';
position:absolute;
width:inherit;
height:2em;
background-color:#4cb7ff;
border-radius:50%;
}
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56742.shtml
