Div rotation increases parent width at some points

Question

I have a div with a border-radius, which is rotated using keyframes. Look at this Fiddle in firefox.

To replicate the problem: let the window size be less than the circle drawn on the page(both in height and width).

Now the problem is that the parent of the rotating div, i.e. body in this case, is resizing to a larger width at some points while the rotation is going on.

The same code in Chrome appears like the parent is resized to a greater width and height once and then it becomes stable.

My question is (even though I have rotated the circle within parent with radius = r): why does the parent width and height increases to greater than r while rotating the div?

---

.circle {
  text-align: center;
  color: yellow;
  font-size: 21px;
  height: 500px;
  width: 500px;
  background: red;
  border-radius: 100%;
  -webkit-animation: mymove 8s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 8s infinite;
}
body {}@-webkit-keyframes mymove {
  0% {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}

<div class='circle'>

  rotated
</div>

Answer 1

The problem:

This (odd) behavior is caused because , what you are rotating isn't really a circle, its actually a block(inline block), which has four corners, just a square.

When you define a border radius it is not changed to a circle, instead its borders become rounded, the element is still a square.

Now, before you rotate the div(circle), which actually is a square, its parent has a width & height equal its child(by default, since it is the only child of its parent in your case),

i.e say width=height= r.

now when you rotate the div, so you rotate a square, and thus when, the square comes diagonally horizontal( or vertical), it gets the maximum height & width.

i.e diagonal=√2r, thus, height = width= √2r i.e 1.41*r, this is surely 41% greater than the original radius of the circle.

Now, this is where the parent is increased in width and height.

---

The solution:

The solution is quite simple, wrap your circle with a parent, and let it hide the overflow. See this Fiddle

now this does not actually make the element itself circular, but will remove excessive, space outside the circle, which overflows the parent.

.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.circle {
  text-align: center;
  color: yellow;
  font-size: 21px;
  height: 500px;
  width: 500px;
  background: red;
  border-radius: 100%;
  -webkit-animation: mymove 8s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 8s infinite;
}
body {}@-webkit-keyframes mymove {
  0% {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}

<div class='parent'>
  <div class='circle'>

    rotated
  </div>
</div>