3D Flip Card FAQ Component

An interactive FAQ component with 3D flip card animations and modern card design for an engaging user experience.

Features

• 3D Flip Animation: Realistic card-flipping effect using CSS 3D transforms
• Interactive Cards: Click on cards to flip and reveal answers
• Modern Design: Clean and contemporary card-based layout
• Responsive Grid: Automatically adjusts to different screen sizes
• Smooth Transitions: Elegant animations for flipping cards
• Customizable: Easy to customize with CSS custom properties

HTML Structure

<div class="flip-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Frequently Asked Questions</h2>
    <p class="faq-subtitle">Click on any card to reveal the answer</p>
  </div>
  
  <div class="faq-grid">
    <div class="faq-card">
      <div class="card-inner">
        <div class="card-front">
          <div class="question-icon">❓</div>
          <h3>What is 3D flip animation?</h3>
          <p class="hint">Click to reveal answer</p>
        </div>
        <div class="card-back">
          <p>3D flip animation creates a realistic card-flipping effect using CSS 3D transforms and perspective.</p>
          <div class="back-footer">
            <span class="close-btn">✕</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-inner">
        <div class="card-front">
          <div class="question-icon">⚙️</div>
          <h3>How does it work?</h3>
          <p class="hint">Click to reveal answer</p>
        </div>
        <div class="card-back">
          <p>The effect is achieved using CSS transform-style: preserve-3d and rotateY transitions.</p>
          <div class="back-footer">
            <span class="close-btn">✕</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-inner">
        <div class="card-front">
          <div class="question-icon">📱</div>
          <h3>Is it mobile-friendly?</h3>
          <p class="hint">Click to reveal answer</p>
        </div>
        <div class="card-back">
          <p>Absolutely! The design is fully responsive and works on all devices with touch support.</p>
          <div class="back-footer">
            <span class="close-btn">✕</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-inner">
        <div class="card-front">
          <div class="question-icon">🎨</div>
          <h3>Can I customize it?</h3>
          <p class="hint">Click to reveal answer</p>
        </div>
        <div class="card-back">
          <p>Yes, the component uses CSS custom properties for easy customization of colors and effects.</p>
          <div class="back-footer">
            <span class="close-btn">✕</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS Styles

.flip-faq-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.faq-subtitle {
  color: #6b7280;
  font-size: 1.1rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  perspective: 1000px;
}

.faq-card {
  height: 250px;
  cursor: pointer;
}

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

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

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card-front {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-front:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-back {
  background: white;
  color: #1f2937;
  transform: rotateY(180deg);
  border: 1px solid #e5e7eb;
}

.question-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.card-front h3 {
  margin: 0 0 1rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}

.hint {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  text-align: center;
}

.card-back p {
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: #4b5563;
}

.back-footer {
  margin-top: auto;
}

.close-btn {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.close-btn:hover {
  background: #e5e7eb;
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .flip-faq-container {
    padding: 1rem;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-card {
    height: 220px;
  }
  
  .card-front, .card-back {
    padding: 1.5rem;
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const faqCards = document.querySelectorAll('.faq-card');
  
  faqCards.forEach(card => {
    const cardInner = card.querySelector('.card-inner');
    const closeBtn = card.querySelector('.close-btn');
    
    // Flip card on click
    cardInner.addEventListener('click', function(e) {
      // Prevent flipping when clicking on close button
      if (!e.target.classList.contains('close-btn')) {
        card.classList.toggle('flipped');
      }
    });
    
    // Close card when close button is clicked
    if (closeBtn) {
      closeBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        card.classList.remove('flipped');
      });
    }
  });
});

Implementation Guide

1. Copy the HTML structure into your project
2. Add the CSS styles to your stylesheet
3. Include the JavaScript code in your script file
4. Customize the gradient colors and card dimensions to match your brand
5. Add your own FAQ questions and answers

The 3D flip card FAQ component features realistic card-flipping animations using CSS 3D transforms. Users can click on any card to flip it and reveal the answer on the back side. The design is fully responsive and works beautifully on both desktop and mobile devices.