前端日常实践：60#视频演示如何使用纯CSS制作乐高积木
时间：2023-04-02 22:39:30
HTML
效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览.https://codepen.io/comehop??e/pen/qKKqrv互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cWm3Vub源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含一组3面：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,white,skyblue);}定义容器尺寸：.brick{width:40em;高度：30em；font-size:10px;}绘制积木的正面：.brick{position:relative;}.sides.front{position:absolute;宽度：9em；高度：6.8em；背景色：#237fbd；顶部：19em；left:7em;}绘制块的右侧：.sides>*{position:absolute;背景色：#237fbd;}.sides.right{width:18em;高度：6.8em；过滤器：亮度（0.8）；顶部：19em；ft:calc(7em+9em);}绘制块的顶部：.sides.top{width:18em;高度：10.4em；过滤器：亮度（1.2）；顶部：计算（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个凸粒元素：
