CSS 变换给 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 属性让它们相互融合。这会导致立方体相互融合并摆脱奇怪的边界。

在此处工作 link：https://codepen.io/anon/pen/LXzWjJ

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

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

希望对您有所帮助！

CSS 变换给 div 一个轮廓

CSS Transforms giving divs an outline

html

css

gradient

transform

isometric