WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CONVERTIR L'IMAGE EN 3D
1659
jatencio3
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
10 September 2024
carte d'identité en Angola
28 September 2025
Animation de chargement CSS avec image d'arrière-plan
4 December 2024
Serpent
HTML
Copy
Imagen en 3D
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)`; });