0

我使用 CSS Doodle 堆叠了这种六边形图案。问题是：我想让六边形更小 1.5-2 倍并且更对称（现在它就像被 X 轴拉伸了一点点），但是必须保存视口更改时的响应。我试图结合许多价值观，但这是我能够做到的最终版本。这里有一个codepen和代码：

https://codepen.io/mepuduah/pen/dyyjRqP

:doodle {
  position: absolute;
  @grid: 1000 / 102vw;
  height: 103vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  top: -3%;
  left: -2%;
}

  @shape: hexagon;
  background: #000;
  @size: 69% 42%;
  -webkit-transition: 2s;
  transform: rotate(45deg) scaleY(2) scaleX(2);
  margin: 45% 55%;
  :hover { 
    background: #fff;
    transition: 0.5s easy-in;
  }
4

2 回答 2

0

很难同时保持这个scaleX/Y比例width/height。但是还有另一种方法可以通过使用使六边形之间的间隙变小translate：

--x: calc((@col() - 1) * -8%); 
--y: calc((@row() - 1) * -20%);
--xx: 0;

@row(even) { 
  --xx: 47%; 
}

transform: 
  translate(var(--x), var(--y)) 
  translateX(var(--xx));

如果要进行旋转，可以更改:container元素：

:container {
  transform: scale(1.5) rotate(-15deg); 
}

另请注意，这32x32是可以制作的最大尺寸css-doodle。在 CodePen 上查看：

https://codepen.io/yuanchuan/pen/qBBMMGa

于 2019-11-13T23:20:02.477 回答
-1

我想要这样的最终结果https://codepen.io/nosovk/pen/yLLEWLY
于 2019-11-12T09:20:34.207 回答