3D Flip Card Hover Effect Code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D Flip Card Hover Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"> </head> <body> ¨K0K </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif } .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 400px; background: black; } .card .imgBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: bottom; transition: 0.5s; transform: translateY(0) rotateX(0deg); } .card:hover .imgBox { transform: translateY(-100%) rotateX(90deg); } .card .details { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; transform-origin: top; transition: 0.5s; box-sizing: border-box; padding: 20px; text-align: center; transform: translateY(100%) rotateX(-90deg); } .card:hover .details { transform: translateY(0) rotateX(0deg); } .card .details .content { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } .card .details .content h3 { color: yellow; text-transform: uppercase; } .card .details .content h3 span { font-size: 14px; color: red; text-transform: initial; } .card .details .content ul { margin: 0; padding: 0; display: flex; width: 100%; padding: 20px 40px; box-sizing: border-box; } .card .details .content ul li { list-style: none; width: 20%; } .card .details .content ul li a { width: 30px; height: 30px; color: black; background: wheat; display: block; text-align: center; line-height: 36px; transition: 0.5s; } .card .details .content ul li a:hover { color: yellow; background: red; }
