父母在旋转时，将子元素保留在容器内？

Question

我有一个旋转圆圈的动画。我想将内圈的位置限制在最外层容器元素的边界;当大红色圆圈旋转时，我希望内部的蓝色圆圈“拥抱”矩形容器的边界。

出于各种原因，我不能简单地为矩形中的内圈设置动画（即，用户可以缩小，现在蓝色圆圈将遵循圆形路径。

.container {
  margin: 0 auto;
  margin-top: 100px;
  width: 300px;
  height: 500px;
  background: #ececec;
  position: relative;
  z-index: 9999;
  overflow: hidden;
}
.circle {
  background: red;
  border-radius: 100%;
  width: 600px;
  height: 600px;
  top: 50%;
  margin-left: -300px;
  margin-top: -300px;
  left: 50%;
  position: absolute;
  z-index: 8888;
}
.inner-circle {
  background-color: blue;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
@-webkit-keyframes rotating
/* Safari and Chrome */
{
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 5s linear infinite;
  -moz-animation: rotating 5s linear infinite;
  -ms-animation: rotating 5s linear infinite;
  -o-animation: rotating 5s linear infinite;
  animation: rotating 5s linear infinite;
}

<div class="container">
  <div class="circle rotating">
    <div class="inner-circle">

    </div>
  </div>
</div>

在实际应用中，圆圈不会被动画旋转，但旋转将由外部输入控制。

JSFiddle here。