悬停时如何旋转和缩放图片？ [复制]答案

【问题标题】：How to rotate and scale a picture when hover? [duplicate]悬停时如何旋转和缩放图片？ [复制]
【发布时间】：2019-02-27 09:54:25
【问题描述】：

当用户将鼠标悬停在 .png 上方时，我不知道如何立即旋转和缩放它。现在它只有在我将鼠标悬停在图片上时才会缩放。我知道规模会覆盖第一个转换，但我不知道如何解决这个问题。我不认为@keyframes 在这种情况下是正确的，因为图片不会从一个地方移动到另一个地方，还是我错了？当我停止悬停时，它又变大了。不旋转。

提前谢谢你。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="CSS/stylesheet-7.css"/>
    </head>
    <body>
        <div class="circle">
            <img src="Images/hypnotic.png">
        </div>
    </body>
</html>

样式表：

html    {
        background: ##99ccff;
        }
.circle img {
            transition: 6s;
            }
.circle img:hover   {
                    transform: rotate(720deg);
                    transform: scale(0.3);
                    }

【问题讨论】：

标签： html css rotation hover scale

【解决方案1】：

您只能定义一次变换。现在最新的定义是覆盖旋转的。只需使用一个变换来放置这两种效果。

html {
  background: ##99ccff;
}

.circle img {
  transition: 6s;
}

.circle img:hover {
  transform: scale(0.3) rotate(720deg);
}

<div class="circle">
  <img src="https://via.placeholder.com/150x150">
</div>

【讨论】：

这正是我想要的解决方案！你能告诉我，当图片缩小到 0.3 大小时，即使我不再将鼠标悬停在图片上方，它是否有可能保持这个大小？
@Hip 不以这种方式使用动画。您将不得不查看关键帧

【解决方案2】：

您正在尝试覆盖图像的转换规则，因为您正在一个接一个地调用它们。尝试transform: scale(0.3) rotate(720deg); 而不是transform: rotate(720deg); transform: scale(0.3); 希望有帮助

【讨论】：

这只是旋转覆盖比例的情况。
不，这里我将 2 种不同的变换状态应用于规则本身，所以“变换知道”我想要进行旋转和缩放，而不是用另一个覆盖。跨度>
哦，我现在明白了。我之前只是理解错了。谢谢。
@Hip 没问题 :)