CSS 3D立方体圆角场景下backface-visibility属性样式自定义方法问询

关于backface-visibility的自定义问题 #

backface-visibility属性本身仅支持visible和hidden两个枚举值，作用仅为控制元素背向观察者时是否渲染，没有提供自定义背向状态样式的接口，无法直接通过该属性调整填充色等样式。

现象原因说明 #

• 圆角后出现空心透明效果：立方体的6个面都是独立的2D平面，圆角会裁切每个面的边角，相邻面的边角无法完全拼接，导致立方体内部的空白空间从圆角缺口处露出，看起来就是空心透明的效果。
• 添加backface-visibility: hidden后出现白色填充：该属性会隐藏背向你的面，此时圆角缺口处露出的是页面默认的白色背景，并非是backface-visibility属性给立方体填充了白色。

解决方案 #

你可以通过以下方式实现自定义填充色的需求：

1. 修改页面/容器背景色
   直接给body或者space3D容器设置你想要的填充色，比如要黑色填充就添加：

body {
  background-color: #000;
}

圆角缺口露出的就会是你设置的背景色，达到自定义填充的效果。
2. 新增内部填充层
在立方体内部添加一个尺寸略小于外层面的实心立方体，设置为你想要的填充色，放在6个面的内侧，即可挡住圆角缺口露出的空白，同时不影响外层的圆角效果。
3. 优化面的拼接
稍微调大每个面的尺寸，或者给面添加对应颜色的内阴影，填补圆角处的拼接缝隙，也能缓解漏空的问题。

内容的提问来源于stack exchange，提问作者citizen1