WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carta 3D 360</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="contenedor"> <div class="carta"> <div class="contenido"> <h1>¡Hola!</h1> <p>Esto es una carta 3D interactiva con movimiento completo.</p> <button>Explorar</button> </div> </div> </div> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(135deg, #0787ffd1, #8494f1); display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', sans-serif; } .contenedor { width: 300px; height: 400px; perspective: 1500px; } .carta { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; backdrop-filter: blur(12px); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3); transition: transform 0.1s ease-out; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; } .contenido { transform: translateZ(60px); text-align: center; color: #f1f1f1; } .contenido h1 { font-size: 1.8rem; color: #ffffff; text-shadow: 0 0 10px #ffffffaa; } .contenido p { margin-top: 10px; font-size: 1rem; color: #dddddd; } .contenido button { margin-top: 20px; padding: 10px 20px; background: linear-gradient(to right, #ffffff, #d9d9d9); color: #222; border: none; border-radius: 15px; font-weight: bold; box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3); cursor: pointer; transition: transform 0.2s ease, background 0.3s; } .contenido button:hover { transform: scale(1.05); background: linear-gradient(to right, #eeeeee, #ffffff); }
const carta = document.querySelector('.carta'); const contenedor = document.querySelector('.contenedor'); document.addEventListener('mousemove', (e) => { const xAxis = ((window.innerWidth / 2 - e.pageX) / 20); const yAxis = ((window.innerHeight / 2 - e.pageY) / 20); carta.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; }); document.addEventListener('mouseleave', () => { carta.style.transform = `rotateY(0deg) rotateX(0deg)`; });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carta 3D 360</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="contenedor"> <div class="carta"> <div class="contenido"> <h1>¡Hola!</h1> <p>Esto es una carta 3D interactiva con movimiento completo.</p> <button>Explorar</button> </div> </div> </div> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(135deg, #0787ffd1, #8494f1); display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', sans-serif; } .contenedor { width: 300px; height: 400px; perspective: 1500px; } .carta { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 25px; backdrop-filter: blur(12px); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3); transition: transform 0.1s ease-out; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; } .contenido { transform: translateZ(60px); text-align: center; color: #f1f1f1; } .contenido h1 { font-size: 1.8rem; color: #ffffff; text-shadow: 0 0 10px #ffffffaa; } .contenido p { margin-top: 10px; font-size: 1rem; color: #dddddd; } .contenido button { margin-top: 20px; padding: 10px 20px; background: linear-gradient(to right, #ffffff, #d9d9d9); color: #222; border: none; border-radius: 15px; font-weight: bold; box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3); cursor: pointer; transition: transform 0.2s ease, background 0.3s; } .contenido button:hover { transform: scale(1.05); background: linear-gradient(to right, #eeeeee, #ffffff); }
const carta = document.querySelector('.carta'); const contenedor = document.querySelector('.contenedor'); document.addEventListener('mousemove', (e) => { const xAxis = ((window.innerWidth / 2 - e.pageX) / 20); const yAxis = ((window.innerHeight / 2 - e.pageY) / 20); carta.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; }); document.addEventListener('mouseleave', () => { carta.style.transform = `rotateY(0deg) rotateX(0deg)`; });