使用 CSS 和 JavaScript 旋轉容器

Question

有一個 2X2 網格容器。 我不能直接旋轉容器，我必須以這樣的方式旋轉這些網格，它應該看起來像我已經旋轉了容器。 問題：旋轉2
看這張圖片，這不是一張圖片，而是 4 張。我想旋轉這些圖片，結果應該就像我旋轉了主容器Img
我的解決方案：旋轉原點右下角的 img1，原點左下角的 img2，原點右上角的 img3 和原點左上角的 img4，因為這將沿着容器的中心旋轉。 旋轉網格后的圖像

 .img1{
  -webkit-transform: rotate(10deg);
    -webkit-transform-origin: bottom right;
}
.img2{
  -webkit-transform: rotate(10deg);
    -webkit-transform-origin: bottom left;
}
.img3{
  -webkit-transform: rotate(10deg);
    -webkit-transform-origin: top right;
}
.img4{
  -webkit-transform: rotate(10deg);
    -webkit-transform-origin: top left;
} 

此解決方案適用於 2x2 容器，但如果容器是 3x3 或 4x4 怎么辦，我如何找到適用於 N x N 網格的解決方案？ 問題：旋轉3

編輯：我無法正確解釋這個問題。 這是簡單形式的問題 -
如何沿着容器中心旋轉 NxN 網格？

Answer 1

你實際上只需要想象原點在哪里（它總是必須在容器的中間），如果說網格是 2x2，原點將是第一列的 1x 和第一行的 1x。 如果網格是 3x3，原點將是第一列的 1.5x，第一行的 1.5x。 如果網格是 4x4，原點將是第一列的 2x 和第一行的 2x。 1x = 100% ，所以1.5x = 150% ，這只是起點，從該值開始，您可以將每一列和每一行減少 100%。

3x3：

 .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>

4x4

 .container { display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-start; padding: 60px; }.img { background: blue; width: 25%; height: 200px; border: 2px solid black; box-sizing: border-box; }.img1 { transform-origin: 200% 200%; transform: rotate(45deg); }.img2 { transform-origin: 100% 200%; transform: rotate(45deg); }.img3 { transform-origin: 0% 200%; transform: rotate(45deg); }.img4 { transform-origin: -100% 200%; transform: rotate(45deg); }.img5 { transform-origin: 200% 100%; transform: rotate(45deg); }.img6 { transform-origin: 100% 100%; transform: rotate(45deg); }.img7 { transform-origin: 0% 100%; transform: rotate(45deg); }.img8 { transform-origin: -100% 100%; transform: rotate(45deg); }.img9 { transform-origin: 200% 0%; transform: rotate(45deg); }.img10 { transform-origin: 100% 0%; transform: rotate(45deg); }.img11 { transform-origin: 0% 0%; transform: rotate(45deg); }.img12 { transform-origin: -100% 0%; transform: rotate(45deg); }.img13 { transform-origin: 200% -100%; transform: rotate(45deg); }.img14 { transform-origin: 100% -100%; transform: rotate(45deg); }.img15 { transform-origin: 0% -100%; transform: rotate(45deg); }.img16 { transform-origin: -100% -100%; 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 class="img img10"></div> <div class="img img11"></div> <div class="img img12"></div> <div class="img img13"></div> <div class="img img14"></div> <div class="img img15"></div> <div class="img img16"></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>

如果我的解釋很難理解，您可以從我上面提供的片段中看到模式。