在您的项目中添加翻转卡片效果只需复制并粘贴代码..
<!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 class="projects"> <div class="container"> <h2 class="section-title">my projects</h2> <div class="projects-grid"> <div class="project-card"> <div class="card-inner"> <div class="card-front"> @@##@@ <h3>project one</h3> </div> <div class="card-back"> <p>a mern stack application with real-time features and dynamic design.</p> <a href="#" class="cta">view project</a> </div> </div> </div> <div class="project-card"> <div class="card-inner"> <div class="card-front"> @@##@@ <h3>project two</h3> </div> <div class="card-back"> <p>an android app featuring modern ui/ux and seamless functionality.</p> <a href="#" class="cta">view project</a> </div> </div> </div> <div class="project-card"> <div class="card-inner"> <div class="card-front"> @@##@@ <h3>project three</h3> </div> <div class="card-back"> <p>a creative portfolio showcasing animations and responsive design.</p> <a href="#" class="cta">view project</a> </div> </div> </div> </div> </div> </section> </body> </html>
/* 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; }
