cari

Rumah >hujung hadapan web >tutorial css >Tambahkan Kad Flip dalam Projek anda

Tambahkan Kad Flip dalam Projek anda

Barbara Streisand
Barbara Streisandasal
2024-11-21 08:33:11802semak imbas

Add Flip Card in your Project

Tambah kesan kad Flip dalam projek anda hanya salin dan tampal kod..

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;
}

Atas ialah kandungan terperinci Tambahkan Kad Flip dalam Projek anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html copy
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bolehkah saya Menggayakan Sauh Berdasarkan Kandungannya Menggunakan CSS?Artikel seterusnya：Bolehkah saya Menggayakan Sauh Berdasarkan Kandungannya Menggunakan CSS?

Artikel berkaitan

Lihat lagi