CSS3变换在具有相等水槽的flex布局中旋转图像

我正在尝试将图像旋转30度，并在图像之间保持相等的边距

所需结果看起来像砖布局：

我从包装的flex布局开始：

并添加30度旋转：

但请注意不均匀性

以下是CSS：

.img-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .img-item {
    flex: 0 0 50%;
    @media #{$tablet} { & { flex: 0 0 25%; } }
    @media #{$desktop} { & { flex: 0 0 20%; } }

    /** padding for the gutters when using flexbox **/
    padding: 5px 10px;
    /** Transformation here
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);

    /* chop off according to media queries - based off of 15 results*/
    &:last-child {
      display: none;
    }
    &:nth-last-child(-n+3) {
      @media #{$tablet} { & { display: none; } }
      @media #{$desktop} { & { display: initial; } }
    }

    .img {
      object-fit: contain;
      max-width: 100%;
    }
  }
}

HTML

=

---

我也尝试过使用CSS网格，但同样缺乏联锁砖布局和相同的垂直排水沟，也没有水平排水沟。

请发布足够的代码来重现这个问题。当使用

transform:rotate

时，它只在视觉上旋转图像，所以DOM不知道它们移动了，因此，你仍然认为它们是正确对齐的。此外，如果你让你的代码在小提琴或代码笔中运行（或者把它的样式编译成CSS，这样它就可以在堆栈片段中运行），你很可能会得到一个正确的建议可以做些什么。知道它们在旋转后应该如何对齐也很好，这是一个很好的展示方式。旋转后是第一个图像——旋转30度。请发布足够的代码来重现问题。当使用

transform:rotate

时，它只在视觉上旋转图像，因此DOM不知道它们移动了，因此仍然认为它们正确对齐。此外，如果你让你的代码在小提琴或代码笔中运行（或者把它的样式编译成CSS，这样它就可以在一个堆栈片段中运行），你很可能会得到一个正确的建议可以做什么也很好知道它们在旋转后应该如何对齐，这是一个很好的显示方式。旋转后是第一个图像——以30度旋转。

<div class="img-container">
    <div class="img-item">
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
      <img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
    </div>
</div>=