Tarjeta moderna con giro

377 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

16 April 2024

Descargar tarjeta HTML de la aplicación

30 August 2024

Efecto de paralaje del control deslizante

21 September 2024

Tarjeta Shake

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>

Recomendado

Descargar tarjeta HTML de la aplicación

Efecto de paralaje del control deslizante

Tarjeta Shake

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS