div 旋转在某些点增加父宽度

Question

我有一个div 和一个border-radius，使用keyframes 旋转。 在 firefox 中查看 Fiddle。

复制问题：让窗口大小小于页面上绘制的圆圈（高度和宽度）。

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

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

我的问题是（尽管我已经用radius = r 旋转了父级内的圆圈）：为什么在旋转 div 时父级的宽度和高度会增加到大于 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

问题：

这种（奇怪的）行为是因为，你旋转的不是真正的圆，它实际上是一个块（内联块），它有四个角，只是一个正方形。

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

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

即说width=height= r。

现在，当您旋转 div 时，您会旋转一个正方形，因此当正方形对角水平（或垂直）时，它会获得最大高度和宽度。

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

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

---

解决办法：

解决方案很简单，用父级包裹你的圈子，让它隐藏溢出。看到这个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>