CSS3 實現圖片懸停翻轉效果：純前端無 JS 打造百合網風格卡片

效果預覽

鼠標懸停圖片，沿 Y 軸 180° 翻轉，背面顯示文字介紹；移出翻轉回原狀。類似百合網「百合推薦」模塊。

HTML 結構

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="photo.jpg" alt="頭像">
    </div>
    <div class="flip-card-back">
      <h3>張三</h3>
      <p>資深架構師，專注分布式系統...</p>
    </div>
  </div>
</div>

CSS 核心樣式

.flip-card {
  perspective: 1000px;           /* 3D 透視距離 */
  width: 200px; height: 280px;   /* 固定尺寸 */
}
.flip-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.6s;    /* 翻轉動畫時長 */
  transform-style: preserve-3d;  /* 保持 3D 空間 */
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);    /* 懸停觸發翻轉 */
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%; height: 100%;
  backface-visibility: hidden;   /* 隱藏背面 */
  display: flex;                 /* 內容垂直水平居中 */
  align-items: center; justify-content: center;
}
.flip-card-back {
  transform: rotateY(180deg);    /* 背面初始反轉 */
  background: #333; color: #fff;
}

關鍵屬性解析

• perspective：父容器設置透視，子元素 3D 變換才有立體感。
• transform-style: preserve-3d：讓子元素在 3D 空間中定位，而非扁平化。
• backface-visibility: hidden：翻轉時隱藏元素背面，避免「透視」穿幫。
• transition：平滑過渡，無需 JS 控制幂。

進階：點擊翻轉（移動端友好）

.flip-card-inner {
  /* ... */
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
// JS 僅切換 class
card.addEventListener('click', () => card.classList.toggle('flipped'));

兼容性提示

IE10+、所有現代瀏覽器完美支持。IE9 及以下無 3D 變換，可用 Modernizr 降級為淡入淡出。