Carte à retourner moderne

1,366 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 May 2026

football de poupée de chiffon

18 December 2025

Jeu Mario HTML5 jouable en ligne

10 February 2025

Un code par bachir123

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