WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tarjeta 3D
928
mambetov1237.b
Abrir en el editor
Publica tu código
Recomendado
20 June 2025
Tarjetas de enlaces de redes sociales HTML
11 December 2024
Tarjeta responsiva
9 July 2025
Tarjeta de precios con efecto de inclinación 3D y anillo de energía
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) */
