html - CSS Transforms 给 div 一个轮廓

Question

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

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

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

我的 CSS 看起来像这样:

.立方体{

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

您可能需要稍微尝试一下转换和维度以获得您想要的确切结果。

这不是最好的解决方案，但似乎可行。

希望这对您有所帮助!