CSS悬停对旋转div的影响

Question

我有一个 div，我使用 transform rotate(正在运行)不断旋转它。然后，当我将鼠标悬停在旋转的 div 上时，我希望能够缩放 div。我无法让它工作，当我移除旋转时它确实会缩放，但我希望它旋转然后在悬停时缩放。

这是我创建的演示笔:(我正在使用 sass)

http://codepen.io/HJBdev/pen/BWVMjZ

<div class="spin">

</div>

.spin {
  height: 50px;
  width: 50px;
  background-color: red;
  -webkit-animation: rotation 7s infinite linear;
  &:hover {
    transform: scale(1.3);
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

Answer 1

将其包裹在容器 div 中以在悬停时重新缩放，然后将 .spin div 设置为 100%
像这样:

HTML:

    .cont {
      height: 50px;
      width: 50px;
    }
    .cont:hover {
      height: 75px;
      width: 75px;
      transition: .5s;
    }
    .spin {
      height: 100%;
      width: 100%;
      background-color: red;
      -webkit-animation: rotation 7s infinite linear;
      &:hover {
        transform: scale(1.3);
      }
    }
    
    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
    }

    <div class="cont">
      <div class="spin">
      
      </div>
    </div>