CSS 3D 转换留下间隙

Question

我正在尝试使用前后伪选择器在 CSS 中制作一个简单的立方体。

然而，这会在立方体的顶部和您可以透过立方体看到洋红色背景的侧面之间留下微小的间隙。

body{background:magenta;perspective: 300000;}

div{
  width:100px;
  height:100px;
  background:yellow;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}

/* Right */
div:after {
  background: #c5c500;
  transform: rotateX(-90deg);
  transform-origin: 100% 0%;
  top: 100%;
  width: 100%;
  height: 100px;
  content: '';
  position: absolute;
  backface-visibility: hidden;
  background-clip:content-box;
}

/* Left */
div:before {
  background: #f3f370;
  transform: translateZ(-100px) rotateY(-90deg);
  transform-origin: 0 100%;
  width: 100px;
  height: 100%;
  content: '';
  position: absolute;
  backface-visibility: hidden;
  background-clip:content-box;
}

您可以在这个 fiddle http://jsfiddle.net/04ggen30/ 中看到它的实际效果

我怎样才能消除这个缝隙，使立方体看不到背景？

Answer 1

这并不是真正的差距。

在边框中，有一些像素，其中元素只覆盖了像素的一小部分。抗锯齿将元素的颜色与背景的颜色混合。对立方体的另一面重复此操作，也覆盖了部分像素，背景对结果的贡献仍然很小。

如果在 HTML 中设置 3 个 div，每张脸一个，就可以解决这个问题。

现在，您可以使用伪元素，在立方体内部移动 1px，使其更加不透明

body{background:magenta;perspective: 300000;}

div{
  width:100px;
  height:100px;
  background:yellow;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}

.right {
  background: #c5c500;
  transform: rotateX(-90deg);
  transform-origin: 100% 0%;
  top: 100%;
  width: 100%;
  height: 100px;
  position: absolute;
  backface-visibility: hidden;
  background-clip:content-box;
}

.left {
  background: #f3f370;
  transform: translateZ(-100px) rotateY(-90deg);
  transform-origin: 0 100%;
  width: 100px;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  background-clip:content-box;
}

.right::after, .left:after {
  content: '';
  top: 0px;
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit;
  transform: translateZ(-1px);
}

<div>
    <div class="right"></div>
    <div class="left"></div>
</div>

另一种使用阴影和单个元素的可能性

body{background:magenta;perspective: 300000;}

div{
  width:100px;
  height:100px;
  background:yellow;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}

/* Right */
div:after {
  background: #c5c500;
  transform: rotateX(-90deg);
  transform-origin: 100% 0%;
  top: 100%;
  width: 100%;
  height: 100px;
  content: '';
  position: absolute;
  backface-visibility: hidden;
  background-clip:content-box;
  box-shadow: 0px -1px 0px 0px #c5c500;
}

/* Left */
div:before {
  background: #f3f370;
  transform: translateZ(-100px) rotateY(-90deg);
  transform-origin: 0 100%;
  width: 100px;
  height: 100%;
  content: '';
  position: absolute;
  backface-visibility: hidden;
  background-clip:content-box;
  box-shadow: 1px 1px 0px 0px #f3f370;
}

<div></div>