WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CONVERTIR L'IMAGE EN 3D
2000
jatencio3
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
30 March 2025
Un code par ytr3d3
21 August 2025
Huawei P70 Pro : acheter maintenant, fonctionnalités et spécifications (TR)
26 August 2024
Terre 3D
HTML
Copy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Imagen en 3D</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="image-wrapper"> <img src="https://idegrafico.com/wp-content/uploads/2017/03/Las-imagenes-raw-son-los-negativos-digitales.jpg" alt="Imagen 3D" id="image"> </div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { margin: 0; padding: 0; overflow: hidden; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { perspective: 1000px; /* Define la distancia desde la cámara */ } .image-wrapper { position: relative; width: 80vw; height: 80vh; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); } img { width: 100%; height: auto; transform: rotateX(0deg) rotateY(0deg); transition: transform 0.1s; }
JS
Copy
document.addEventListener('mousemove', (event) => { const image = document.getElementById('image'); const x = (event.clientX / window.innerWidth) * 2 - 1; // Normalizado entre -1 y 1 const y = (event.clientY / window.innerHeight) * 2 - 1; // Normalizado entre -1 y 1 image.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`; });
