WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3D card
1663
mambetov1237.b
Open In Editor
Video
Publish Your Code
0
Recommended
27 November 2024
Cards Products
26 August 2024
3D Earth
7 February 2025
card
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="cards"> <figure class="card"> <figcaption class="card_title">3D Hover</figcaption> </figure> </div> </body> </html><!-- Replace with your HTML Code (Leave empty if not needed) -->
CSS
Copy
body { justify-content: center; align-items: center; display: flex; padding: 50px; } .cards { perspective: 500px; } .card { width: 600px; height: 600px; background: #16161d; border: 2px solid #555555; border-radius: 4px; position: relative; transform-style: preserve-3d; will-change: transform; transition: transform 0.5s; } .card:hover { transform: translateZ(10px) rotateX(20deg) rotateY(20deg); } .card_title { color: #fff; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: transform 0.5s; font: 700 1.5rem monospace; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; text-align: center; } .card:hover .card_title { transform: translateZ(50px); }<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
