Question

我有div border-radius，使用keyframes进行轮换。请在 firefox 中查看此Fiddle。

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

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

Chrome中的相同代码显示为父级调整为更大的宽度和高度一次然后变得稳定。

我的问题是（即使我已使用radius = 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（圆圈），实际上是一个正方形，它的父亲有一个宽度＆amp; height等于其子项（默认情况下，因为它是您父项中唯一的子项），

即说width=height= r。

现在当你旋转div时，所以你旋转一个正方形，因此当正方形呈对角线水平（或垂直）时，它会得到最大高度＆amp;宽度。

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

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

<小时/> 解决方案：

解决方案非常简单，用父对象包裹你的圆圈，让它隐藏溢出。见Fiddle

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

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

Div旋转会增加某些点的父宽度

1 个答案: