在網站設計中，常常需要用到圖片的輪播展示。傳統的輪播展示方式較為單調，無法吸引用戶的注意力。因此，設計師們開始將css中的旋轉屬性運用到圖片輪播中，創造出了許多生動有趣、造型獨特的旋轉木馬式圖片輪播。

旋轉木馬式圖片輪播的原理是利用css3中的transform屬性和transition屬性控制圖片的旋轉和切換效果。其實現步驟如下：

.carousel{
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
transform-style: preserve-3d;
}
.slide{
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
font-weight: 900;
color: #fff;
transform-style: preserve-3d;
transition: transform 1s;
}
.slide:hover{
transform: rotateY(-60deg);
}
.slide:nth-child(1){
background: #34495e;
}
.slide:nth-child(2){
background: #2ecc71;
}
.slide:nth-child(3){
background: #8e44ad;
}
.slide:nth-child(4){
background: #f1c40f;
}
.slide:nth-child(5){
background: #e74c3c;
}

通過以上代碼，我們可以實現一個包含五張圖片的旋轉木馬式圖片輪播。其中，.carousel為輪播容器，.slide為每張輪播圖片。在.hover時，.slide會繞Y軸以-60deg的角度旋轉，實現圖片的切換效果。

除了通過.hover觸發圖片的切換效果外，我們還可以通過javascript控制整個輪播過程。同時，我們還可以利用其他css屬性和貝塞爾曲線控制圖片的運動速度和軌跡，創造出更加炫酷的旋轉木馬式圖片輪播效果。