CSS 转换为 div 提供轮廓

Question

我正在构建一个用 css 创建的立方体等距网格，但我遇到了轮廓问题。

以下是我想要实现的目标： cube design 但这是我到目前为止所得到的：

html cube 我尝试了一些常用技巧，例如使用一些 translateZ 和背面可见性，但无济于事。

我的 CSS 看起来像这样：

.cube {

transform: rotateX(55deg) rotateZ(45deg) translateX(50%) translateY(-50%);
transform-origin: 0% 0%;
transform-style: preserve-3d;
position: relative;
pointer-events:all;
transition: background-position ease 7s;
background-size: 400% 400%;


div {
  position: absolute;
  transition: background-position ease 7s;
  backface-visibility: hidden;

  &:first-child {
    transform-origin: center top;
    width: 100%;
    height:100%;
    transform: rotateX(-90deg);
    top: 100%;
  }

  &:nth-child(2) {
    transform-origin: left center;
    width: 100%;
    height: 100%;
    left: 100%;
    transform: rotateY(90deg);
  }
}

任何想法都将不胜感激。

codepen link

Answer 1

这里的技巧是让立方体的面重叠并使用background-blend-mode CSS 属性让它们相互融合。这会导致立方体相互融合并摆脱奇怪的边界。

工作代码笔链接在这里：https://codepen.io/anon/pen/LXzWjJ

您可能需要稍微调整一下变换和尺寸以获得您想要的确切结果。

这不是最好的解决方案，但它似乎有效。

希望这会有所帮助！