WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
छवि को 3डी में परिवर्तित करें
1915
jatencio3
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
30 March 2025
ytr3d3 द्वारा एक कोड
28 November 2024
robustbug269 द्वारा एक कोड
6 December 2024
dynamicarray606 द्वारा एक कोड
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)`; });