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

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);
    }