Componente de Tarjetas FAQ 3D Flip

Un componente FAQ interactivo con animaciones de tarjetas 3D flip y diseño moderno de tarjetas para una experiencia de usuario atractiva.

Características

• Animación 3D Flip: Efecto realista de volteo de tarjetas usando transformaciones CSS 3D
• Tarjetas Interactivas: Haz clic en las tarjetas para voltearlas y revelar respuestas
• Diseño Moderno: Diseño limpio y contemporáneo basado en tarjetas
• Cuadrícula Responsive: Se ajusta automáticamente a diferentes tamaños de pantalla
• Transiciones Suaves: Animaciones elegantes para voltear tarjetas
• Personalizable: Fácil de personalizar con propiedades CSS personalizadas

Estructura HTML

<div class="flip-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Preguntas Frecuentes</h2>
    <p class="faq-subtitle">Haz clic en cualquier tarjeta para revelar la respuesta</p>
  </div>
  
  <div class="faq-grid">
    <div class="faq-card">
      <div class="card-inner">
        <div class="card-front">
          <div class="question-icon">❓</div>
          <h3>¿Qué es la animación 3D flip?</h3>
          <p class="hint">Haz clic para revelar la respuesta</p>
        </div>
        <div class="card-back">
          <p>La animación 3D flip crea un efecto realista de volteo de tarjetas usando transformaciones CSS 3D y perspectiva.</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>¿Cómo funciona?</h3>
          <p class="hint">Haz clic para revelar la respuesta</p>
        </div>
        <div class="card-back">
          <p>El efecto se logra usando CSS transform-style: preserve-3d y transiciones rotateY.</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>¿Es amigable para móviles?</h3>
          <p class="hint">Haz clic para revelar la respuesta</p>
        </div>
        <div class="card-back">
          <p>¡Absolutamente! El diseño es totalmente responsive y funciona en todos los dispositivos con soporte táctil.</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>¿Puedo personalizarlo?</h3>
          <p class="hint">Haz clic para revelar la respuesta</p>
        </div>
        <div class="card-back">
          <p>¡Sí! El componente usa propiedades CSS personalizadas para facilitar la personalización de colores y efectos.</p>
          <div class="back-footer">
            <span class="close-btn">✕</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Estilos CSS

.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;
  }
}

Funcionalidad JavaScript

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');
      });
    }
  });
});

Guía de Implementación

1. Copia la estructura HTML en tu proyecto
2. Agrega los estilos CSS a tu hoja de estilos
3. Incluye el código JavaScript en tu archivo de script
4. Personaliza los colores del degradado y las dimensiones de las tarjetas para que coincidan con tu marca
5. Agrega tus propias preguntas y respuestas del FAQ

El componente de tarjetas FAQ 3D flip presenta animaciones realistas de volteo de tarjetas usando transformaciones CSS 3D. Los usuarios pueden hacer clic en cualquier tarjeta para voltearla y revelar la respuesta en el reverso. El diseño es totalmente responsive y funciona bellamente tanto en escritorio como en dispositivos móviles.