css - Div 旋转在某些点增加父级宽度

Question

我有一个带有 border-radius 的 div，它使用 keyframes 旋转。 看这个Fiddle在 firefox 中。

重现问题:让窗口大小小于页面上绘制的圆(高度和宽度)。

现在的问题是，旋转 div 的父级，即本例中的 body，在旋转过程中在某些点上调整到更大的宽度。

在 Chrome 中，相同的代码看起来就像父级被调整到更大的宽度和高度一次，然后它变得稳定。

我的问题是(即使我已经用 radius = r 旋转了父级内的圆):为什么旋转时父级宽度和高度增加到大于 r股利？

---

.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

问题:

这种(奇怪的)行为是因为，你旋转的不是真正的圆，它实际上是一个 block (内联 block )，它有四个 Angular ，只是一个正方形。

当你定义一个边框半径时，它并没有变成圆形，而是变成了圆形，元素仍然是一个正方形。

现在，在旋转 div(圆)之前，它实际上是一个正方形，它的父元素的宽度和高度等于它的子元素(默认情况下，因为它是其父元素的唯一子元素在你的情况下)，

即说 width=height= r。

现在，当您旋转 div 时，您也旋转了一个正方形，因此当正方形呈水平(或垂直)对 Angular 线时，它会获得最大高度和宽度。

即 diagonal=√2r，因此，height = width=√2r 即 1.41*r，这肯定比 41% 大圆的原始半径。

现在，这是父级的宽度和高度增加的地方。

---

解决方案:

解决方案非常简单，用父级包裹你的圆圈，让它 overflow hidden 。看这个Fiddle

现在这确实不会实际上使元素本身成为圆形，但会移除圆圈外过多的空间，这会溢出父元素。

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