有可能得到12件分割而不是4在圆形画廊？

Question

我有一些代码，将4幅图像显示为圆圈画廊中的片段。如何将圆圈分割成12幅而不是4幅呢？我试着用div再添加一个部分，但是每一个新的图像都被放置在圆圈画廊之外。

请告诉我如何处理这个问题，或者我是否应该尝试另一种方法来达到预期的结果。如果有别的办法，如果你能带我去，我会很感激的。

​

* {
  box-sizing: border-box;
}

body{
  align-items: center;
  background-color: #333;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  min-width: 500px;
  transform: rotate(45deg);
}

.photo {
  position: relative;
  background-size: cover;
  flex: 50%;
  overflow: hidden;
  transition: transform .3s ease-out;
}

img {
  position: absolute;
  top: -190px;
  left: -90px;
  transform: rotate(-45deg);
}

.photo-1 {
  border-top-left-radius: 100%;
}
.photo-1:hover {
    transform: translate(-25px, -25px) scale(1.08);
}

.photo-2 {
  border-top-right-radius: 100%;
}
.photo-2:hover {
    transform: translate(25px, -25px) scale(1.08);
}

.photo-3 {
  border-bottom-left-radius: 100%;
}
.photo-3:hover {
    transform: translate(-25px, 25px) scale(1.08);
}

.photo-4 {
  border-bottom-right-radius: 100%;
}
.photo-4:hover {
    transform: translate(25px, 25px) scale(1.08);
}

.photo-5{
  border-top-left-radius: 100%;
}
.photo-5:hover {
    transform: translate(25px, 25px) scale(1.08);
}

<div class="gallery">
  <div class="photo photo-1">
    <img src="https://images.unsplash.com/photo-1461534204375-bd3ba51cca78?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
  <div class="photo photo-2">
    <img src="https://images.unsplash.com/photo-1423483641154-5411ec9c0ddf?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
  <div class="photo photo-3">
    <img src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
  <div class="photo photo-4">
    <img src="https://images.unsplash.com/photo-1479064578521-1eebbb96eca1?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
</div>

​

Answer 1

TL;DR:您需要改变您的方法，但是对原始代码如何工作的解释可能会帮助您理解原因。

现有代码的工作方式是有一个由正方形图像组成的2x2网格。然后，每个图像在其一个角上圆角。整个画廊是旋转，然后最后每一个图像是在悬停动画。

这是一个相对简单的设置，因为将4幅图像放在2x2网格中很容易。让他们出现在一个圆圈里的造型也不是什么大工作。然而，如果您想要12张图片，您有一个更复杂的任务，因为您将需要使所有12张图像在一个单一的点相交。因此，您将需要设计一种方法，使他们的楔形。最初的代码(有4幅图像)不需要使图像出现楔形，因为在2x2网格中，所有4幅图像都会自然地在中间相遇。实际上，它们已经是90度的楔形，仅仅是因为它们是方形的。

这导致了你的问题的实际答案:你需要一个更复杂的方法来超过4张图片。我建议先把一张图片设计成30度的楔形，然后把其中12幅画在一起，但我必须承认，我并不清楚我将如何以你想要的方式创建这个画廊。我希望对现有代码的解释将有助于您解决问题并取得进展。