Tarjeta moderna con giro

1,314 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

31 January 2026

Diseño de tarjeta CSS con fondo degradado

14 September 2024

Interacción con carteles de películas

22 September 2025

Juego de cubo 3D HTML con estadísticas y personalización

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modern Flip Card</title>
<style>
  /* Basic Reset */
  * {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

body {
    background: #f0f2f5;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }

/* Card Container */
  .card {
    width: 300px;
    height: 400px;
    perspective: 1500px;
    cursor: pointer;
  }

/* Card Inner for flip */
  .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
  }

/* Flip the card when active */
  .card.flipped .card-inner {
    transform: rotateY(180deg);
  }

/* Front and Back sides */
  .card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    color: #fff;
  }

/* Front side */
  .card-front {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.5);
  }

.card-front h2 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
  }

.card-front p {
    font-size: 1.1rem;
    line-height: 1.4;
    opacity: 0.85;
  }

/* Back side */
  .card-back {
    background: #1e293b;
    transform: rotateY(180deg);
    box-shadow: 0 10px 20px rgba(30, 41, 59, 0.8);
    color: #cbd5e1;
    padding-top: 3rem;
    text-align: center;
  }

.card-back h3 {
    margin-bottom: 1rem;
    font-weight: 700;
    color: #a5b4fc;
  }

.card-back p {
    font-size: 1rem;
    line-height: 1.5;
  }

/* Button */
  .btn {
    margin-top: auto;
    align-self: center;
    padding: 0.7rem 1.8rem;
    background-color: #a78bfa;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(167, 139, 250, 0.4);
    transition: background-color 0.3s ease;
  }

.btn:hover {
    background-color: #7c3aed;
    color: white;
  }
</style>
</head>
<body>

<div class="card" id="card">
  <div class="card-inner">
    <div class="card-front">
      <h2>Modern Card</h2>
      <p>This is a sleek modern card with flip animation. Click the button to learn more!</p>
      <button class="btn" id="flipBtn">More Info</button>
    </div>
    <div class="card-back">
      <h3>Details</h3>
      <p>This card flips smoothly using CSS 3D transform and is interactive with JavaScript.</p>
      <button class="btn" id="flipBackBtn">Back</button>
    </div>
  </div>
</div>

flipBtn.addEventListener('click', () => {
    card.classList.add('flipped');
  });

flipBackBtn.addEventListener('click', () => {
    card.classList.remove('flipped');
  });
</script>

</body>
</html>

CSS