Componente de Tarjetas de Precios 3D Flotantes

Una tabla de precios innovadora con tarjetas 3D flotantes, sombras dinámicas y animaciones interactivas para una experiencia de usuario de vanguardia.

Características

• Efecto 3D Flotante: Tarjetas que flotan y rotan en espacio 3D con movimiento del ratón
• Sombras Dinámicas: Sombras realistas que cambian con la rotación de las tarjetas
• Animaciones Interactivas: Transiciones suaves y efectos hover
• Alternancia de Facturación: Cambia entre precios mensuales y anuales con visualización de descuento
• Resaltado de Plan Popular: Tarjeta visualmente distinta para el plan más popular
• Acentos de Degradado: Colores degradados modernos para atractivo visual

Estructura HTML

<div class="floating-pricing-container">
  <div class="pricing-header">
    <h2 class="pricing-title">Precios Elevados</h2>
    <p class="pricing-subtitle">Planes que flotan por encima de la competencia</p>
  </div>
  
  <div class="pricing-toggle">
    <span class="toggle-label">Mensual</span>
    <label class="switch">
      <input type="checkbox" id="billing-toggle">
      <span class="slider"></span>
    </label>
    <span class="toggle-label">Anual</span>
    <span class="discount-badge">Ahorra 30%</span>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card" data-tier="basic">
      <div class="card-inner">
        <div class="card-header">
          <h3 class="plan-name">Básico</h3>
          <p class="plan-description">Perfecto para principiantes</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="19" data-yearly="13.30">19</span>
          <span class="period">/mes</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">1 Sitio Web</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">5GB Almacenamiento</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Soporte Básico</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-icon">✗</div>
            <span class="feature-text">Certificado SSL</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-icon">✗</div>
            <span class="feature-text">Dominio Personalizado</span>
          </li>
        </ul>
        <button class="select-button">Comenzar</button>
      </div>
    </div>
    
    <div class="pricing-card popular" data-tier="pro">
      <div class="card-inner">
        <div class="popular-badge">Más Popular</div>
        <div class="card-header">
          <h3 class="plan-name">Pro</h3>
          <p class="plan-description">Para negocios en crecimiento</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="49" data-yearly="34.30">49</span>
          <span class="period">/mes</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">5 Sitios Web</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">50GB Almacenamiento</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Soporte Prioritario</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Certificado SSL Gratis</span>
          </li>
          <li class="feature-item disabled">
            <div class="feature-icon">✗</div>
            <span class="feature-text">Dominio Personalizado</span>
          </li>
        </ul>
        <button class="select-button">Comenzar</button>
      </div>
    </div>
    
    <div class="pricing-card" data-tier="enterprise">
      <div class="card-inner">
        <div class="card-header">
          <h3 class="plan-name">Empresarial</h3>
          <p class="plan-description">Para grandes organizaciones</p>
        </div>
        <div class="card-price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="99" data-yearly="69.30">99</span>
          <span class="period">/mes</span>
        </div>
        <ul class="features-list">
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Sitios Web Ilimitados</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">500GB Almacenamiento</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Soporte Dedicado 24/7</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Certificado SSL Gratis</span>
          </li>
          <li class="feature-item">
            <div class="feature-icon">✓</div>
            <span class="feature-text">Dominio Personalizado</span>
          </li>
        </ul>
        <button class="select-button">Contactar Ventas</button>
      </div>
    </div>
  </div>
</div>

Estilos CSS

.floating-pricing-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0f172a;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.floating-pricing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%),
              radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
  pointer-events: none;
}

.pricing-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.pricing-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #f1f5f9;
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.pricing-subtitle {
  color: #94a3b8;
  font-size: 1.1rem;
}

.pricing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.toggle-label {
  font-size: 1rem;
  color: #cbd5e1;
  font-weight: 500;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1e293b;
  transition: .4s;
  border-radius: 34px;
  border: 1px solid #334155;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

input:checked + .slider {
  background: #1e293b;
}

input:checked + .slider:before {
  transform: translateX(30px);
}

.discount-badge {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.pricing-card {
  background: #1e293b;
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateZ(0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-radius: 20px;
  z-index: -1;
}

.pricing-card:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.pricing-card.popular {
  background: #334155;
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.pricing-card.popular:hover {
  transform: scale(1.05) translateY(-15px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.pricing-card.popular .popular-badge {
  position: absolute;
  top: 1rem;
  right: -30px;
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: white;
  padding: 0.25rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  transform: rotate(45deg);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
}

.card-inner {
  position: relative;
  z-index: 2;
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.plan-name {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #f1f5f9;
  font-weight: 700;
}

.plan-description {
  color: #94a3b8;
  font-size: 0.9rem;
}

.card-price {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.card-price::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
}

.currency {
  font-size: 1.5rem;
  color: #94a3b8;
  vertical-align: top;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: #f1f5f9;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.period {
  color: #94a3b8;
  font-size: 1rem;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #334155;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
}

.feature-item:not(.disabled) .feature-icon {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.feature-item.disabled .feature-icon {
  background: #334155;
  color: #64748b;
}

.feature-text {
  color: #cbd5e1;
  font-size: 0.95rem;
}

.feature-item.disabled .feature-text {
  color: #64748b;
}

.select-button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

.select-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
}

@media (max-width: 768px) {
  .floating-pricing-container {
    padding: 1rem;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-title {
    font-size: 2rem;
  }
  
  .pricing-card.popular {
    transform: scale(1);
  }
  
  .pricing-card.popular:hover {
    transform: translateY(-15px);
  }
}

Funcionalidad JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('billing-toggle');
  const amounts = document.querySelectorAll('.amount');
  
  toggle.addEventListener('change', function() {
    amounts.forEach(amount => {
      if (this.checked) {
        amount.textContent = amount.getAttribute('data-yearly');
      } else {
        amount.textContent = amount.getAttribute('data-monthly');
      }
    });
  });
  
  // Add 3D effect to cards
  const cards = document.querySelectorAll('.pricing-card');
  
  cards.forEach(card => {
    card.addEventListener('mousemove', (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const centerX = rect.width / 2;
      const centerY = rect.height / 2;
      const rotateX = (y - centerY) / 20;
      const rotateY = (centerX - x) / 20;
      
      if (!card.classList.contains('popular')) {
        card.style.transform = `translateZ(0) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      }
    });
    
    card.addEventListener('mouseleave', () => {
      if (!card.classList.contains('popular')) {
        card.style.transform = 'translateZ(0)';
      }
    });
  });
});

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 e intensidad del efecto 3D para que coincidan con tu marca
5. Actualiza los planes de precios y características para reflejar tus ofertas

Las tarjetas de precios 3D flotantes presentan un diseño de vanguardia con tarjetas que rotan en espacio 3D en respuesta al movimiento del ratón. El plan popular es visualmente distinto y ligeramente elevado, con todas las tarjetas presentando sombras dinámicas que cambian con la rotación para un efecto flotante realista.