首页 > 解决方案 > 如何保持内部正方形无限旋转

问题描述

我以这两个 div 为例,我想让内部的 div 保持无限旋转状态。我该怎么做?

<div class="parent">
  <div class="child">
 </div>
</div>

.parent{
  width:100px;
  height:100px;
  margin:50px auto;
}

.child{
  width:50px;
  height:50px;
  margin:25px auto;
  transform:rotate(45deg)
}

标签: javascripthtmlcss

解决方案


也许是关于无限旋转。如果是这样,也许这就是它的目的:)

.parent {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      border: 1px solid red;
    }

    .child {
      width: 50px;
      height: 50px;
      margin: 25px auto;
      animation: rotating 2s linear infinite;
      border: 1px solid blue;
    }

    @keyframes rotating {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
<div class="parent">
    <div class="child">
    </div>
  </div>


推荐阅读