CSS 实现一个3d魔方

1.实现效果

2.实现步骤

• 魔方的一面为九个圆角正方形，定义正方形的宽高为–w，九个正方形的直接的间距为–gap，由此可以计算出父容器的宽/高，box-sizing为border-box

--w: 60px;
--gap: 10px;
--allW: calc(3 * var(--w) + 4 * var(--gap)); 

• 魔方有六个面，定义六个面中格子的背景颜色，以及六个面的背景色

--c1: #f5e7a1;
--c2: skyblue;
--c3: #fff;
--c4: #97d497;
--c5: #801a1a;
--c6: orange;
--bg: #000; 

• 设置父容器宽高为–allW

<div class="container"></div> 

.container {width: var(--allW);height: var(--allW);
} 

• 添加魔方元素的父元素，宽高与父容器一致，设置 transform-style: preserve-3d，指示元素的子元素应位于 3D 空间

<div class="container">
 + <div class="container-box"></div>
</div> 

.container-box {border: 1px solid red;position: relative;width: var(--allW);height: var(--allW);transform-style: preserve-3d;
} 

• 在container-box添加魔方的其中一面cube-side，absolute定位，宽高与父元素一致，设置一定的圆角，内边距为gap

 <div class="container-box">
	+ <div class="cube-side"></div>
 </div> 

.cube-side {
 width: 100%;
 height: 100%;
 position: absolute;
 background: var(--bg);
 border-radius: 7px;
 padding: var(--gap);
} 

• 在cube-side中添加一个宫格，设置color为c1，背景色为currentColor

currentColor：

表示元素color属性的计算值。它能让原本不能默认通过属性或子元素继承的颜色属性继承。如果没有设置color就找父元素,一级一级找，直到根元素。

<div class="cube-side">
	+ <div class="cube-grid" style="--c: var(--c1)"></div>
</div> 

.cube-side .cube-grid {width: var(--w);height: var(--w);border-radius: calc(var(--w) / 5);color: var(--c);background: currentColor;
} 

为cube-side添加box-shadow，实现剩余的8个宫格（当然你也可以再写8个宫格，实现九宫格布局）