Rotate a container using CSS and JavaScript-CodePudding

There is a 2X2 grid container. I can not rotate container directly, I have to rotate these grids in such a way that It should look like I have rotated the container. Question: Rotate2
Look at this image, this is not a single image but 4. I want to rotate these images and result should be like I have rotated the main container Img
My solution: Rotate the img1 with origin bottom-right, img2 with origin bottom-left, img3 with origin top-right and img4 with origin top-left, because this will make rotation along with center of container. image after rotating grids

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

This solution works as expected for 2x2 container, but what if container is 3x3 or 4x4, how can I find out the solution which will work for N x N grid? Question: Rotate3

Edit: I am not able to explain the question properly. Here is question in simple form -
How to rotate the NxN grid along with center of container?

CodePudding user response：

You actually just need to imagine where the origin is (which always has to be in the middle of the container), if let's say the grid is 2x2, the origin would be 1x the the first column and 1x of the first row. If the grid is 3x3, the origin would be 1.5x of the first column, and 1.5x of the first row. If the grid is 4x4, the origin would be 2x of the first column and 2x of the first row. And 1x = 100%, so 1.5x = 150%, and that's just the starting point, from that value, you can decrease it by 100% for each column and row.

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

NxN:

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>

If my explanation was so hard to understand, you could see the pattern from the snippet I provided above.