WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
छवि को 3डी में परिवर्तित करें
2337
jatencio3
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
1
अनुशंसित
30 June 2025
मीटर का एक कोड
17 June 2025
पीएनएल द्वारा एक कोड
9 September 2024
कोडपेन - फ़ोन नंबर इनपुट फ़ील्ड
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)`; });