CSS旋轉木馬是一種非常炫酷的效果，可以在網頁中展示出一組圖片的旋轉特效，非常適合在手機端進行展示。下面我們就來給大家介紹如何使用CSS實現旋轉木馬！

<style>
.carousel{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100vh;
overflow: hidden;
}
.carousel img{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all ease-in-out 1s;
transform: scale(0.5);
}
.carousel img.active{
opacity: 1;
transform: scale(1);
}
.carousel img.right{
left: 100%;
}
.carousel img.left{
left: -100%;
}
.btn{
display: flex;
justify-content: space-between;
width: 100px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.btn button{
width: 50px;
height: 50px;
border: none;
background-color: #333;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.btn button:first-child{
border-radius: 50% 0 0 50%;
}
.btn button:last-child{
border-radius: 0 50% 50% 0;
}
</style>
<div class="carousel">
<img class="left" src="https://picsum.photos/id/237/800/800">
<img class="active" src="https://picsum.photos/id/238/800/800">
<img class="right" src="https://picsum.photos/id/239/800/800">
<div class="btn">
<button class="prev"><i class="fas fa-angle-left"></i></button>
<button class="next"><i class="fas fa-angle-right"></i></button>
</div>
</div>
<script>
let images = document.querySelectorAll('.carousel img');
let index = 1;
setInterval(() => {
index ++;
if(index > images.length - 1) {
index = 0;
}
images.forEach(img => img.classList.remove('active','left','right'));
images[index].classList.add('active');
images[index - 1].classList.add('left');
images[index + 1].classList.add('right');
}, 3000);
</script>

以上是實現旋轉木馬的HTML、CSS和JavaScript代碼。通過修改其中的圖片鏈接，即可實現在手機端展示出我們需要的旋轉木馬效果。