60.纯 CSS 创作一块乐高积木

原文地址：https://segmentfault.com/a/1190000015369542

感想：y轴旋转，相对定位，今天有点懵呀，唉。

HTML code：

<!-- 定义dom，容器中包含一组3个面 -->
<!-- brick: 砖 ； sides ： 边; front: 前面  -->
<div class="brick">
    <div class="sides">
          <span class='front'></span>
          <span class='right'></span>
          <span class="top"></span>
    </div>
    <div class="studs">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
     </div>
</div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
/* 设置body子元素水平垂直居中 */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 背景颜色设置下面样式无效，背景设置有效 */
    background: radial-gradient(circle at center, white, skyblue);
}
/* 设置.brick容器的样式 */
.brick{
    /* 为子元素的定位做准备 */
    position: relative;
    /* 本身默认 font-size: 12px; 所以可以删除 */
    font-size: 12px;
    width: 40em;
    height: 30em;
    border: 1px solid blue;
}
/* 画出积木三面共有属性 */
.brick .sides > * {
    position: absolute;
    background-color: #237fbd;
}
/* 画出积木的正面 */
.brick .sides .front{
    top: 19em;
    left: 7em;
    width: 9em;
    height: 6.8em;
    /* 组合成立方体 */
    transform-origin: right;
    transform: skewY(30deg);
}
/* 画出积木的右面 */
.brick .sides .right {
    top: 19em;
    left: calc(7em + 9em);
    width: 18em;
    height: 6.8em;
    filter: brightness(0.8);
    transform-origin: left;
    transform: skewY(-30deg);
}
/* 画出积木的顶面 */
.brick .sides .top {
    top: calc(19em - 10.4em);
    left: calc(7em + 9em);
    width: 18em;
    height: 10.4em;
    filter: brightness(1.2);
    transform-origin: left bottom;
    transform: rotate(-60deg) skewY(30deg);
}
/* 不需要.studs */
.studs{
    position: absolute;
    border: 1px solid red;
}
/* 突粒 */
.studs span {
    position: absolute;
    width: 3.6em;
    height: 3em;
    background-color: #237fbd;
    /* 突粒下的影子居然是用边框设置的 */
    border-radius: 1.8em / 1em;
}
.studs span:nth-child(1) {
    --n: 1;
}
.studs span:nth-child(3) {
    --n: 3;
}
.studs span:nth-child(5) {
    --n: 5;
}
.studs span:nth-child(7) {
    --n: 7;
}
.studs span:nth-child(2) {
    --n: 2;
}
.studs span:nth-child(4) {
    --n: 4;
}
.studs span:nth-child(6) {
    --n: 6;
}
.studs span:nth-child(8) {
    --n: 8;
}
/* 画出左侧的凸粒 */
.studs span:nth-child(odd) {
    top: calc(4.6em + (var(--n) - 1) / 2 * 2.6em);
    left: calc(23.3em - (var(--n) - 1) / 2 * 4.6em);
}
/* 画出右侧的凸粒 */
.studs span:nth-child(even) {
    top: calc(6.9em + (var(--n) - 2) / 2 * 2.6em);
    left: calc(27.9em - (var(--n) - 2) / 2 * 4.6em);
}
/* 画出凸粒的顶面 */
.studs span::before {
    content: '';
    position: absolute;
    width: inherit;
    height: 2em;
    background-color: #4cb7ff;
    border-radius: 50%;
}