.contenedor-certificado { perspective: 1000px; width: 100%; max-width: 400px; height: 280px; margin: 0 auto; touch-action: pan-y; /* Mejora la experiencia de deslizamiento */ } .tarjeta { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s; } .contenedor-certificado.girada .tarjeta { transform: rotateY(180deg); } .cara { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.4); pointer-events: none; } .frontal { transform: rotateY(0deg); } .reverso { transform: rotateY(180deg); } .cara img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } @media (hover: hover) { .contenedor-certificado:hover .tarjeta { transform: rotateY(180deg); } }
const certificado = document.getElementById('certificado'); let startX = 0; let endX = 0; // Captura el inicio del toque certificado.addEventListener('touchstart', function(e) { startX = e.changedTouches[0].clientX; }, { passive: true }); // Captura el fin del toque certificado.addEventListener('touchend', function(e) { endX = e.changedTouches[0].clientX; handleSwipe(e); }, { passive: false }); // Prevenir que toques simples rompan el comportamiento certificado.addEventListener('touchmove', function(e) { e.preventDefault(); // Evita que el navegador interfiera }, { passive: false }); function handleSwipe(e) { const diff = endX - startX; // Evita "toques" sin movimiento if (Math.abs(diff) < 30) { e.preventDefault(); // Tap sin swipe: no hacer nada ni romper nada return; } if (diff < 0) { // Swipe izquierda: girar certificado.classList.add('girada'); } else { // Swipe derecha: volver certificado.classList.remove('girada'); } } // Evita que un click/tap normal interfiera certificado.addEventListener('click', function(e) { e.preventDefault(); });

.cards-container { padding: 2rem; } .cards-docentes { display: flex; justify-content: center; align-items: center; position: relative; } .card-docente { background-color: white; border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); padding: 0.5rem; width: 160px; transform: rotate(-6deg); position: relative; z-index: 1; transition: transform 0.3s ease, z-index 0.3s ease; display: flex; flex-direction: column; } .card-docente.card-middle { transform: rotate(0deg); z-index: 2; margin: 0 -40px; } .card-docente:last-child { transform: rotate(6deg); z-index: 1; } .card-docente:hover { transform: scale(1.10) rotate(0deg); z-index: 3; } .card-docente img { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 0.5rem; } .polaroid-space { height: 30px; background: white; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin: 0 -0.5rem -0.5rem -0.5rem; }