Cartão Flip Moderno

Abrir no Editor Publique Seu Código

Recomendado

15 October 2024

Exemplo de cartão UNO HTML CSS

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>

Cartão Flip Moderno

Recomendado

Cartão de Planos Anes

Cartão Flip

Exemplo de cartão UNO HTML CSS

HTML

CSS

JS

Recomendado

Cartão de Planos Anes

Cartão Flip

Exemplo de cartão UNO HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS