CSS3 旋轉木馬調色照片效果,是一種獨特的圖片輪播展示效果。通過 CSS3 的 transform 和 transition 功能,實現圖片的旋轉和輪播效果。
html: <!--HTML結構--> <section class="carousel"> <img src="image1.jpg" alt="image1"> <img src="image2.jpg" alt="image2"> <img src="image3.jpg" alt="image3"> <img src="image4.jpg" alt="image4"> <img src="image5.jpg" alt="image5"> </section> CSS: /*CSS樣式*/ .carousel { width: 800px; height: 480px; margin: 0 auto; position: relative; transform-style: preserve-3d; perspective: 1000px; } .carousel img { position: absolute; transform: translateZ(-240px); top: 60px; left: 160px; } .carousel img:nth-child(1) { transform: translateZ(240px) rotateY(0deg); transition: all 1s ease; } .carousel img:nth-child(2) { transform: translateZ(240px) rotateY(72deg); transition: all 1s ease; } .carousel img:nth-child(3) { transform: translateZ(240px) rotateY(144deg); transition: all 1s ease; } .carousel img:nth-child(4) { transform: translateZ(240px) rotateY(216deg); transition: all 1s ease; } .carousel img:nth-child(5) { transform: translateZ(240px) rotateY(288deg); transition: all 1s ease; } .carousel:hover img { transform: translateZ(-240px) scale(0.8); opacity: 0.5; }
在 HTML 結構中,使用 section 標簽作為容器,并使用 img 標簽來嵌入圖片。
在 CSS 樣式中,設置容器的寬度、高度、居中和 3D 效果。圖片的定位使用了絕對定位,通過 transform 和 transition 設置圖片的旋轉和輪播效果,并添加了鼠標懸浮時的跳動和透明度變化效果。
這種效果具有獨特的視覺效果和操作體驗,可以用于展示產品或圖片集合等場景。如需更多操作細節或優化,可以根據需要進行調整。