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); 希望有帮助

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

2 个答案: