這篇文章要介紹如何使用 HTML 和 CSS創建一個 3D 旋轉木馬效果，讓圖片在頁面上以立體的方式旋轉，並滑鼠懸停時會暫停旋轉

HTML

創建一個容器 carousel，包含多個圖片項目，每個項目都使用 <div> 元素包裹 <img> 標籤

<div class="carousel">
    <div class="carousel-item item1">
        <img src="picture1.jpeg" alt="Image 1">
    </div>
    <div class="carousel-item item2">
        <img src="picture2.png" alt="Image 2">
    </div>
    <div class="carousel-item item3">
        <img src="picture3.jpg" alt="Image 3">
    </div>
    <div class="carousel-item item4">
        <img src="picture4.jpg" alt="Image 4">
    </div>
    <div class="carousel-item item5">
        <img src="picture5.jpg" alt="Image 5">
    </div>
</div>

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中顯示，確保圖片位於畫面正中間

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   background-color: #f0f0f0;
} 

２. 旋轉木馬的容器

.carousel {
    position: relative;
    width: 400px; 
    height: 400px; 
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear; 
    perspective: 1200px;
}
 
.carousel:hover {
    animation-play-state: paused; 
}

• transform-style : 容器內的子元素在進行 3D 變換時要保持其 3D 狀態
• animation :
  • rotate : 動畫的名稱
  • 10s : 每次旋轉的時間
  • infinite : 表示無限循環
  • linear : 表示動畫的速度是均勻的
• perspective : 設置視角距離，會影響旋轉時的立體感，數值越小，效果越明顯
• .carousel:hover { animation-play-state: paused; } : 當鼠標懸停在旋轉木馬上時，動畫暫停

3. 設定每個項目

.carousel-item {
    position: absolute;
    width: 300px;  
    height: 300px; 
    transform-origin: center center -350px; 
}

• transform-origin : 指定旋轉的中心點
  • center center : 表示水平方向和垂直方向的中心點
  • -350px : 指定 Z 軸的位置

4. 圖片樣式

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    clip-path: circle(50%); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

• object-fit : 控制圖片的縮放方式
  • cover : 保持圖片的原始比例，並確保其覆蓋整個容器，可能會裁剪掉圖片的某些部分
• clip-path : 將圖片裁剪成圓形
• box-shadow : 添加陰影效果，讓每個圖片更具立體感

5. 每個項目的旋轉角度

每個 .item 使用 rotateY 屬性，設置每個項目在 Y 軸上的旋轉角度，讓五個項目在旋轉木馬中均勻分佈

.item1 {
    transform: rotateY(0deg);
}
 
.item2 {
    transform: rotateY(72deg);
}
 
.item3 {
    transform: rotateY(144deg);
}
 
.item4 {
    transform: rotateY(216deg);
}
 
.item5 {
    transform: rotateY(288deg);
}

６. 定義旋轉動畫

定義一個名為 rotate 的動畫，包含兩個關鍵幀

@keyframes rotate {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

• from : 指定動畫開始的狀態，從 0deg 開始
• to : 指定動畫結束的狀態，旋轉到 360deg，即完成一圈的旋轉

結果呈現

• 圖片來源1
• 圖片來源2
• 圖片來源3
• 圖片來源4
• 圖片來源5