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

Question

我有一个 div 和一个 border-radius，它使用 keyframes 旋转。在 firefox.

中查看这个 Fiddle

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

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

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

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

问题：

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

定义边框半径时，它不会更改为圆形，而是变为圆形，元素仍然是正方形。

现在，在旋转div（圆）之前，它实际上是一个正方形，它的parent的宽度和高度等于它的child（默认情况下，因为它是您的 parent 中唯一的 child），

即width=height= r.

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

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

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

解决方法：

解决方法很简单，用 parent 包裹你的圆圈，让它隐藏溢出。看到这个 Fiddle

现在这确实不是实际上使元素本身成为圆形，但会去除多余的，space在圆外，溢出 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>

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

Div rotation increases parent width at some points

css

border

css-shapes