Fügen Sie Ihrem Projekt eine Flip Card hinzu-CSS-Tutorial-php.cn

Fügen Sie Ihrem Projekt eine Flip Card hinzu

Barbara Streisand

Freigeben： 2024-11-21 08:33:11

Original

783 Leute haben es durchsucht

Add Flip Card in your Project

Fügen Sie den Flip-Card-Effekt zu Ihrem Projekt hinzu, kopieren Sie einfach den Code und fügen Sie ihn ein.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>



  <!-- Projects Section -->
  <section>



<p><strong>CSS</strong><br>
</p>

<pre class="brush:php;toolbar:false">/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    scroll-behavior: smooth;
}



/* Projects Section */
.projects {
    padding: 50px 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project-card {
    perspective: 1000px;
    height: 200px;
}

.card-inner {
    transition: transform 0.8s;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.project-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.card-front {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card-back {
    background: #2575fc;
    color: #fff;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFügen Sie Ihrem Projekt eine Flip Card hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!