你只需要想象一下原点在哪里（必须位于容器的中间），假设网格为2x2，则原点为第一列的1x和第一行的1x;如果网格为3x3，则原点为第一列的1.5x和第一行的1.5x;如果网格为4x4，原点是第一列的2x和第一行的2x，还有1x = 100%，这只是个起点，从这个值开始，你可以在每一列和每一行减少100%。
三乘三：

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  padding: 60px;
}

.img {
  background: blue;
  width: 30%;
  height: 200px;
  border: 2px solid black;
  box-sizing: border-box;
}

.img1 {
  transform-origin: 150% 150%;
  transform: rotate(45deg);
}

.img2 {
  transform-origin: 50% 150%;
  transform: rotate(45deg);
}

.img3 {
  transform-origin: -50% 150%;
  transform: rotate(45deg);
}

.img4 {
  transform-origin: 150% 50%;
  transform: rotate(45deg);
}

.img5 {
  transform-origin: 50% 50%;
  transform: rotate(45deg);
}

.img6 {
  transform-origin: -50% 50%;
  transform: rotate(45deg);
}

.img7 {
  transform-origin: 150% -50%;
  transform: rotate(45deg);
}

.img8 {
  transform-origin: 50% -50%;
  transform: rotate(45deg);
}

.img9 {
  transform-origin: -50% -50%;
  transform: rotate(45deg);
}

<div class="container">
  <div class="img img1"></div>
  <div class="img img2"></div>
  <div class="img img3"></div>
  <div class="img img4"></div>
  <div class="img img5"></div>
  <div class="img img6"></div>
  <div class="img img7"></div>
  <div class="img img8"></div>
  <div class="img img9"></div>
</div>

四轮驱动
一个二个一个一个
N × N：

const generate = document.getElementById('generate');
const container = document.getElementById('container');

generate.addEventListener('click', () => {
  const angle = document.getElementById('angle').value;
  const n = document.getElementById('n').value;
  container.innerHTML = "";
  const initialPercentage = Math.floor(Number(n) / 2) * 100;
  const width = 100 / Number(n);

  let yPercentage = initialPercentage;
  for (let i = 0; i < Number(n); i++) {
    let xPercentage = initialPercentage;
    for (let j = 0; j < Number(n); j++) {
      const div = document.createElement("div");

      div.classList.add("img");
      div.style.width = `${width}%`;
      div.style.paddingBottom = `${width}%`;
      div.style.transform = `rotate(${angle}deg)`;
      div.style.transformOrigin = `${xPercentage}% ${yPercentage}%`;

      xPercentage -= 100;
      container.appendChild(div);
    }
    yPercentage -= 100;
  }
});

#container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  padding: 60px;
}

.img {
  background: blue;
  border: 2px solid black;
  box-sizing: border-box;
}

<input id="angle" type="number" placeholder="angle" />
<input id="n" type="number" placeholder="N" />
<button id="generate">generate</button>
<div id="container">
</div>

如果我的解释很难理解，那么您可以从我上面提供的代码片段中看到这种模式。