CSS 3D Transformation留下了空白

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;
}

您可以在这个小提琴http://jsfiddle.net/04ggen30/

中看到这一点

如何摆脱这种差距，以便通过立方体看不到背景？

Answer 1

我刚刚将width: 101px;更改为元素之前和之后。你可以看到这个小提琴http://jsfiddle.net/04ggen30/2/。或者，您可以将transform属性更改为transform: translateZ(-99px) rotateY(-90deg);，将translateZ从-100px更改为99px。

Answer 2

这不是真正的差距。

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

如果在HTML中设置3个div，每个面都有一个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>