CSS悬停对旋转div的影响

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

这是我创建的一支演示笔：（我正在使用sass）

.旋转{
高度：50px；
宽度：50px；
背景色：红色；
-webkit动画：旋转7s无限线性；
&：悬停{
转换：比例（1.3）；
}
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
}
}

将其包装在容器div中以在悬停时重新缩放，然后使.spin div为100%
像这样：

HTML:

.cont{
高度：50px；
宽度：50px；
}
.续：悬停{
高度：75px；
宽度：75px；
过渡：.5s；
}
.旋转{
身高：100%；
宽度：100%；
背景色：红色；
-webkit动画：旋转7s无限线性；
&：悬停{
转换：比例（1.3）；
}
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
}
}

---

将其包装在容器div中以在悬停时重新缩放，然后使.spin div为100%
像这样：

HTML:

.cont{
高度：50px；
宽度：50px；
}
.续：悬停{
高度：75px；
宽度：75px；
过渡：.5s；
}
.旋转{
身高：100%；
宽度：100%；
背景色：红色；
-webkit动画：旋转7s无限线性；
&：悬停{
转换：比例（1.3）；
}
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
}
}

---

您可以为包含

比例的悬停创建新动画

像这样：

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

然后在悬停时使用它：

.spin {
  height: 50px;
  width: 50px;
  background-color: red;
  -webkit-animation: rotation 7s infinite linear;

  &:hover {
    -webkit-animation: rotationScale 7s infinite linear;
  }
}

可以为包含
比例的悬停创建新动画

像这样：

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

然后在悬停时使用它：

.spin {
  height: 50px;
  width: 50px;
  background-color: red;
  -webkit-animation: rotation 7s infinite linear;

  &:hover {
    -webkit-animation: rotationScale 7s infinite linear;
  }
}

无需为它们添加任何HTML元素或包装器，就可以使用此CSS。也许值得注意的是，过渡效果使它在视觉上更吸引用户，因为它在选定的持续时间内变化，而不是试图在瞬间变化

.spin {
    height: 50px;
    width: 50px;
    background-color: red;
    -webkit-animation: rotation 7s infinite linear;
    transition:height 1.5s, width 1.5s;
    &:hover {
        height:8em;
        width:8em;
    }
}

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

无需为它们添加任何HTML元素或包装器，就可以使用此CSS。也许值得注意的是，过渡效果使它在视觉上更吸引用户，因为它在选定的持续时间内变化，而不是试图在瞬间变化

.spin {
    height: 50px;
    width: 50px;
    background-color: red;
    -webkit-animation: rotation 7s infinite linear;
    transition:height 1.5s, width 1.5s;
    &:hover {
        height:8em;
        width:8em;
    }
}

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

您正在使用该
：hover
覆盖您的
转换
样式。您正在使用该
：hover
覆盖您的
转换
样式。提示：图像按钮右侧有一个代码段按钮，您可以在其中插入HTML和CSS以创建可执行的演示，而不必将其分开。提示：右侧在图像按钮中有一个代码片段按钮，您可以在其中插入HTML和CSS来创建可执行的演示，而不必将其分开。