CODEWITHSUNDEEP
javascriptcssreactjs
ashish
ashish

Reputation: 3

Rotate a container using CSS and JavaScript

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?

Upvotes: 0

Views: 153

Answers (1)

Damzaky
Damzaky

Reputation: 10824

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

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.

Upvotes: 1

Related Questions