html - IOS悬停后如何回到原来的位置

Question

我有一张 HTML 格式的图片，我在悬停时旋转它。

在 PC 上它可以工作。它会旋转，如果我离开图像，它会回滚。在 iOS 上悬停对我不起作用正确。

如果我选中图片，它会旋转但不会旋转回原始状态。

有没有办法让它在一定时间后返回 0？ (尝试过但没有工作)

我尝试使用 onClick 和其他一些东西，但我没有找到任何方法将其旋转回来。

我注意到，如果在 iOS 上页面上有另一个悬停效果，并且第二个上有另一个选项卡，第一个会恢复正常。

<header>
<img src="images/Logo1.png" alt="Logo" class="profile-image">
</header>

header .profile-image:hover, .profile-image:active {
  transform: scale(2.3) rotate(360deg);
}

Answer 1

您是否尝试过将 scale 和 rotate 设置为初始值？

.profile-image {
    /* animation duration on transform */
    transition: transform .2s;

    /* set initial values */
    transform: scale(1) rotate(0deg);
}

.profile-image:hover,
.profile-image:active {
    transform: scale(2.3) rotate(360deg);
}

<header>
    <img width="50px" src="https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg" alt="Logo" class="profile-image">
</header>