WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CONVERTIR IMAGEN A 3D
2346
jatencio3
Open In Editor
Video
Publish Your Code
1
Recommended
3 April 2025
A Code by simohdrca
23 March 2025
A Code by constantcc607
23 June 2025
HTML Login Form Example
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)`; });