移动端Safari及Web App中hover旋转Transform效果失效问题

问题现象 #

CSS的transform: rotate() hover旋转效果在桌面浏览器、移动端Chrome中可正常触发，但在移动端Safari以及Instagram内置Web App里，点击/触摸元素时无法触发该旋转动画。

核心原因 #

1. 触摸设备默认不原生支持hover伪类，仅通过点击无法触发；
2. Safari及部分Web App对可交互元素的判定严格，未标记为可交互的元素不会响应触摸触发的伪类；
3. 部分Web View环境下，CSS过渡的前缀支持存在差异。

解决方法 #

方法一：CSS层面兼容触摸伪类 #

通过添加:active、:focus伪类配合:hover，同时标记元素为可交互，适配触摸场景：

修改后的核心CSS代码：

div {
  padding: 15px;
  border-radius: 10px;
  -webkit-transition: -webkit-transform 2s ease-in-out; 
  transition: transform 2s ease-in-out;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  /* 新增：标记为可交互元素，让Safari识别 */
  cursor: pointer;
  /* 移除点击高亮优化体验 */
  -webkit-tap-highlight-color: transparent;
}

/* 同时支持hover和触摸触发的active/focus状态 */
div:hover, 
div:active, 
div:focus {
  -webkit-transform: rotate(10deg); 
  transform: rotate(10deg);
}

方法二：JavaScript监听触摸事件（兼容复杂Web View） #

如果纯CSS方案无效，通过JS监听触摸事件手动控制动画：

1. 给需要旋转的元素添加统一类名（如rotatable），修改HTML中对应div的类；
2. 添加以下JS代码：

const rotatableItems = document.querySelectorAll('.rotatable');

rotatableItems.forEach(item => {
  // 触摸开始时添加旋转类
  item.addEventListener('touchstart', () => {
    item.classList.add('rotate-active');
  });
  // 触摸结束后，等待过渡完成再移除类
  item.addEventListener('touchend', () => {
    setTimeout(() => {
      item.classList.remove('rotate-active');
    }, 2000); // 时长与CSS过渡时间保持一致
  });
});

3. 对应CSS新增类样式：

.rotate-active {
  -webkit-transform: rotate(10deg); 
  transform: rotate(10deg);
}

方法三：Safari专属过渡优化 #

确保移动端媒体查询中，过渡属性的前缀完整，初始状态明确：

@media (max-width: 950px) {
  div {
    -webkit-transform: rotate(4deg); 
    transform: rotate(4deg);
    /* 重复声明过渡属性，确保Safari识别 */
    -webkit-transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  
  div:hover, div:active, div:focus {
    -webkit-transform: rotate(10deg); 
    transform: rotate(10deg);
  }
}

验证方式 #

修改代码后，分别在移动端Safari和Instagram内置Web App中测试，触摸元素时应能正常触发旋转动画。

内容的提问来源于stack exchange，提问作者Mimj