移动端CSS rotateY 3D卡片翻转功能失效问题求助

Looks like your 3D flip works perfectly on desktop, but mobile browsers don’t recognize the :hover state since they rely on touch instead of mouse events. Here are a couple of solid fixes to get this working on mobile without ditching the 3D effect:

1. CSS-Only Quick Fix (Add Touch Support) #

Mobile browsers can respond to the :active pseudo-class when users tap an element. We’ll combine this with :hover for desktop, plus add vendor prefixes to ensure 3D transform support across older mobile browsers:

#f1_container { 
  position: relative; 
  margin: 10px auto; 
  height: 170px; 
  background: #028fcc; 
  z-index: 1; 
  /* Remove default mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
}
#f1_container { 
  perspective: 1000; 
  -webkit-perspective: 1000; /* Vendor prefix for WebKit-based browsers */
}
#f1_card { 
  width: 100%; 
  height: 100%; 
  transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; /* Vendor prefix */
  transition: all 1.0s linear; 
}
#f1_card .front .title-serv { color: white; font-size: 20px; padding: 10px; }
#f1_card .front img { width: 80px; height: 80px; }

/* Update trigger to support both desktop hover and mobile tap */
#f1_container:hover #f1_card,
#f1_container:active #f1_card { 
  transform: rotateY(180deg); 
  -webkit-transform: rotateY(180deg); /* Vendor prefix */
}

.face { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden; /* Vendor prefix */
}
.face.back { 
  display: block; 
  transform: rotateY(180deg); 
  -webkit-transform: rotateY(180deg); /* Vendor prefix */
  box-sizing: border-box; 
  padding: 10px; 
  color: silver; 
  text-align: center; 
  background-color: white; 
}

Note on CSS-Only Fix: #

This works for basic tap-to-flip, but some mobile browsers might keep the :active state until the user taps elsewhere. For a consistent toggle effect (tap to flip, tap again to flip back), use the JavaScript approach below.

2. JavaScript Toggle (More Reliable for Mobile) #

Add a simple touch event listener to toggle a flip class, giving you full control over the flip state across all devices:

First, update your CSS to use a class instead of :hover:

/* Replace the hover rule with this */
#f1_container.flip-active #f1_card { 
  transform: rotateY(180deg); 
  -webkit-transform: rotateY(180deg);
}

Then add this JavaScript (place it right before the closing </body> tag):

// Get all flip containers
const flipContainers = document.querySelectorAll('#f1_container');

flipContainers.forEach(container => {
  // Toggle flip on mobile touch
  container.addEventListener('touchstart', (e) => {
    e.preventDefault(); // Prevent accidental scrolling during tap
    container.classList.toggle('flip-active');
  });
  
  // Keep desktop hover support
  container.addEventListener('mouseenter', () => {
    container.classList.add('flip-active');
  });
  
  container.addEventListener('mouseleave', () => {
    container.classList.remove('flip-active');
  });
});

This approach works seamlessly on both desktop (hover to flip, leave to reset) and mobile (tap to toggle), avoiding any weird state persistence issues from the CSS-only method.

Why This Happened: #

Desktop browsers trigger :hover when the mouse cursor is over an element, but mobile devices use touch events instead. Your original CSS only targeted :hover, so mobile users couldn’t trigger the flip. Adding touch event support or :active bridges that gap.

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