Question

我有一张HTML图片，并且在悬停时旋转它。

在PC上有效。它旋转，如果我离开图像，它会回滚。在iOS上，悬停不适用于我。

如果我在“图片”选项卡上旋转了图片，但它没有旋转回到其原始状态。

有没有办法让它在经过一定时间后返回0？（尝试过但没有用）

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

我注意到，如果Page上的是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>

Answer 2

尝试-webkit

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

    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);

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

在IOS上悬停后如何回到原始位置

2 个答案: