WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cartão 3D
1345
mambetov1237.b
Abrir no Editor
Publique Seu Código
Recomendado
22 April 2025
Abelha realista 3D
23 May 2025
Menu de hambúrguer com login 3D
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) */
