3D Card Flip Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Card Flip Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="flipcard"> <div class="front"><img src="image.png"></div> <div class="back"><h4>3D Card Flip</h4></div> </div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background: gold; } .container { width: 200px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); perspective: 1000px; transform-style: preserve-3d; } .container .front img { width: 100%; border-radius: 8px; } .flipcard { position: relative; transition: 0.8s; transform-style: preserve-3d; } .flipcard .front { position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: 0.8s; transform-style: preserve-3d; z-index: 100; border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); } .flipcard .back { position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: 0.8s; transform-style: preserve-3d; z-index: 99; border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,0.5); background: red; width: 200px; height: 300px; transform: rotateY(180deg); text-align: center; line-height: 300px; } .container:hover .front { transform: rotateY(-180deg); } .container:hover .back { transform: rotateY(0deg); } h4 { margin: 0; padding: 0; font-size: 24px; color: blue; text-transform: uppercase; }
