如何使用纯CSS实现一块乐高积木
居中显示：
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个凸粒元素：
