WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Carta 3D
926
mambetov1237.b
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
22 April 2025
Ape realistica 3D
21 September 2024
Agitare la carta
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) */
