Proyecto Final de Transform

.escena-tarjeta-3d {
  width: 280px;
  height: 170px;
  perspective: 800px;
}

.tarjeta-3d {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0;
  background: #9FA6FF;
  border: 1px solid rgba(159, 166, 255, 0.25);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  cursor: pointer;
}

.brillo {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.tarjeta-3d:hover .brillo {
  opacity: 1;
}

const tarjeta = document.getElementById('tarjeta-tilt');
const escena = tarjeta.parentElement;

escena.addEventListener('mousemove', (e) => {
  const rect = escena.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const mx = (x / rect.width) * 100;
  const my = (y / rect.height) * 100;
  
  // Calcular la rotación (-15 a 15 grados)
  const rotY = ((x / rect.width) - 0.5) * 30;
  const rotX = -((y / rect.height) - 0.5) * 20;
  
  tarjeta.style.transform = 
    'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
  tarjeta.style.setProperty('--mx', mx + '%');
  tarjeta.style.setProperty('--my', my + '%');
});

escena.addEventListener('mouseleave', () => {
  tarjeta.style.transform = 'rotateX(0) rotateY(0)';
});

.loader-avanzado {
  width: 80px;
  height: 80px;
  position: relative;
}

.anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.anillo-1 {
  border-top-color: #a855f7;
  animation: girar 1s linear infinite;
}

.anillo-2 {
  inset: 10px;
  border-right-color: #3b82f6;
  animation: girar 0.7s linear infinite reverse;
}

.anillo-3 {
  inset: 20px;
  border-bottom-color: #ec4899;
  animation: girar 0.5s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}