CSS3D圖片自動輪播是一種視覺效果十分美觀的圖片輪播方式。在這種輪播中,圖片會在三維空間之間移動,使圖片輪播更具有立體感,也更加吸引人。
/* CSS 代碼 */ .slider { position: relative; height: 400px; width: 600px; margin: auto; overflow: hidden; transform-style: preserve-3d; } .slider figure { position: absolute; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; transition: transform 1s ease-in-out; backface-visibility: hidden; } .slider figure:nth-child(1) { transform: translateZ(0); } .slider figure:nth-child(2) { transform: rotateY(60deg) translateZ(-200px); } .slider figure:nth-child(3) { transform: rotateY(120deg) translateZ(-200px); } .slider figure:nth-child(4) { transform: rotateY(180deg) translateZ(-200px); } .slider figure:nth-child(5) { transform: rotateY(240deg) translateZ(-200px); } .slider figure:nth-child(6) { transform: rotateY(300deg) translateZ(-200px); } .slider figure:nth-child(7) { transform: rotateY(360deg) translateZ(0); } /* JavaScript 代碼 */ let slider = document.querySelector('.slider'); let slides = document.querySelectorAll('.slider figure'); let current = 1; let interval = setInterval(nextSlide, 3000); function nextSlide() { if (current === slides.length - 1) { current = 0; } else { current++; } slider.style.transform = `rotateY(-${current * 60}deg)`; }
以上是CSS3D圖片自動輪播的代碼示例。需要注意的是,CSS3D圖片輪播時需要使用transform-style屬性為preserve-3d,同時還需要使用backface-visibility: hidden來避免在旋轉時的閃爍問題。
具體實現時,可以使用JavaScript來控制圖片輪播。我們可以使用setInterval定時器來每隔一定時間自動切換圖片,同時記錄當前顯示的圖片編號,用transform: rotateY來實現圖片的旋轉。