原文地址：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:;
padding:;
}
/* 设置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:;
}
.studs span:nth-child(3) {
--n:;
}
.studs span:nth-child(5) {
--n:;
}
.studs span:nth-child(7) {
--n:;
}
.studs span:nth-child(2) {
--n:;
}
.studs span:nth-child(4) {
--n:;
}
.studs span:nth-child(6) {
--n:;
}
.studs span:nth-child(8) {
--n:;
}
/* 画出左侧的凸粒 */
.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%;
}