要創(chuàng)建CSS翻轉卡片效果，首先使用HTML結構包含前后兩面，然后通過CSS實現(xiàn)3D翻轉。1. 創(chuàng)建包含.card-container、.card、.card-front和.card-back的HTML結構；2. 在CSS中為.card-container設置perspective以建立3D空間，為.card設置transform-style: preserve-3d和過渡效果，并在:hover時應用rotateY(180deg)實現(xiàn)翻轉；3. 為.card-front和.card-back設置絕對定位、backface-visibility: hidden，并將.card-back初始旋轉180度以正確顯示內容；4. 可選地，通過JavaScript添加點擊翻轉功能，將:hover替換為.flipped類觸發(fā)翻轉；5. 優(yōu)化建議包括使用背景圖、調整過渡時間、支持移動端交互，最終實現(xiàn)一個平滑且具有視覺吸引力的翻轉效果。

Creating a flipping card effect with CSS is a great way to add interactivity and visual appeal to your web projects—like for image galleries, product cards, or profile cards. The effect typically shows one side of a card (front), and when hovered (or clicked), it flips to reveal the back side.

Here’s how to build a smooth, 3D flipping card effect using HTML and CSS only.

? 1. Basic HTML Structure

Start with a container for the card and two inner divs for the front and back faces:

<div class="card-container">
  <div class="card">
    <div class="card-front">
      <h3>Front Side</h3>
      <p>Hover to flip!</p>
    </div>
    <div class="card-back">
      <h3>Back Side</h3>
      <p>Surprise content!</p>
    </div>
  </div>
</div>

? 2. CSS for the Flip Effect

The key to the flip is using 3D transforms and transform-style: preserve-3d on the parent, along with backface-visibility: hidden on the faces.

.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* Creates 3D space */
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
}

.card-front {
  background-color: #3498db;
  background-size: cover;
  background-position: center;
}

.card-back {
  background-color: #e74c3c;
  transform: rotateY(180deg);
}

? Key Concepts Explained

• perspective on .card-container:
  This gives depth to the 3D transformation. A lower value makes the flip more dramatic.

  

• transform-style: preserve-3d on .card:
  Ensures child elements (front/back) exist in 3D space, not flattened.

• backface-visibility: hidden:
  Hides the back of each face when it's facing away (avoids seeing mirrored content).

• rotateY(180deg) on hover:
  Rotates the entire card 180 degrees around the Y-axis to show the back.

• transform: rotateY(180deg) on .card-back:
  Starts the back face already flipped so it appears correctly when the card rotates.

?? Optional: Click to Flip (Instead of Hover)

If you want a click-based flip (e.g., on mobile), use a little JavaScript:

document.querySelector('.card-container').addEventListener('click', function () {
  this.classList.toggle('flipped');
});

Then change the CSS hover rule to:

.card-container.flipped .card {
  transform: rotateY(180deg);
}

? Tips for Better Results

• Use images or gradients for more visual impact.
• Adjust transition timing for smoother or snappier effects.
• You can flip on X-axis (rotateX) for a vertical flip.
• Test on mobile—consider using cursor: pointer or tap zones.

That’s it! With just a few lines of CSS, you’ve got a sleek flipping card. It’s not complex, but the 3D effect makes it feel polished.

以上是如何使用CSS創(chuàng)建翻轉卡效果？的詳細內容。更多信息請關注PHP中文網其他相關文章！