最近,我學習了如何使用HTML代碼制作3D看月亮的效果。以下是我的思路以及實現的過程:
//1.首先,我們需要創建一個含有圖片背景的div容器 <div class="moon"> <img src="moon.png" alt="月亮"> </div> //2.接下來,我們需要通過CSS來實現3D視覺效果 .moon { width: 300px; height: 300px; perspective: 1000px; } img { width: 100%; height: 100%; transform: rotateY(60deg) rotateX(-30deg); transform-style: preserve-3d; transition: transform 1s; } //3.最后,我們可以通過JS來添加交互效果 var moon = document.querySelector('.moon'); moon.addEventListener('mousemove', function(e){ var x = - (e.clientX - moon.offsetWidth/2)/5; var y = (e.clientY - moon.offsetHeight/2)/5; img.style.transform = 'rotateY('+x+'deg) rotateX('+y+'deg)'; });
這樣就可以完成一個極具立體感的月亮效果啦!