WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!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) -->
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) -->
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!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) -->
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) -->
/* Replace with your JS Code (Leave empty if not needed) */