悬停时如何旋转和缩放图片？

Question

我不知道如何在用户将鼠标悬停在 .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);
                    }

Answer 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>

Answer 2

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

悬停时如何旋转和缩放图片？

How to rotate and scale a picture when hover?

html

css

rotation

scale

hover