3d旋轉魔方相冊代碼源碼，html代碼示例
以下是一組HTML代碼源碼示例，用於展示3D旋轉魔方相冊：
<!DOCTYPE html>
<html>
<head>
<title>3D旋轉魔方相冊示例</title>
<style>
/* 用於設置魔方圖像卡片的大小和邊距 */
.gallery {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
}
/* 用於容納每個魔方圖像的卡片 */
.gallery-item {
width: 250px;
height: 250px;
margin: 10px;
position: relative;
border: 1px solid #ccc;
perspective: 1000px; /* 設置透視點 */
}
/* 卡片的前面圖像 */
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease; /* 圖像變換的過渡時間和效果 */
transform-style: preserve-3d;
}
/* 懸停效果：圖像旋轉到反面 */
.gallery-item:hover img {
transform: rotateY(360deg);
}
/* 卡片的背面：包含圖像描述和陰影效果 */
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(360deg); /* 將背面內容旋轉過來 */
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<h1>3D旋轉魔方相冊</h1>
<div class="gallery">
<div class="gallery-item">
<img src="https://mippu.qunapu.com/upload/2023/05/20230515115327168412280759751.png" alt="魔方圖像1" />
<div class="backside">這是圖像1的描述</div>
</div>
<div class="gallery-item">
<img src="https://mippu.qunapu.com/upload/2022/03/202203251648178843147319.jpg" alt="魔方圖像2" />
<div class="backside">這是圖像2的描述</div>
</div>
<div class="gallery-item">
<img src="https://mippu.qunapu.com/upload/2022/03/202203251648178843147319.jpg" alt="魔方圖像3" />
<div class="backside">這是圖像3的描述</div>
</div>
<div class="gallery-item">
<img src="https://mippu.qunapu.com/upload/2022/03/202203251648178843147319.jpg" alt="魔方圖像4" />
<div class="backside">這是圖像4的描述</div>
</div>
</div>
</body>
</html>代碼解釋：
1. `<style>`：用於在HTML內部設置CSS樣式。
2. `.gallery`：CSS選擇器，用於設置整個相冊的樣式。`display: flex`和`justify-content: center`讓相冊的卡片居中顯示。
3. `.gallery-item`：CSS選擇器，用於設置每個魔方圖像卡片的樣式。`perspective: 1000px`設置透視點，讓魔方顯示出3D效果。
4. `.gallery-item img`：CSS選擇器，用於設置魔方圖像卡片的前面。`transition`設置圖像翻轉的過渡效果，`transform-style: preserve-3d`是將圖像的變換保留在3D空間。
5. `.gallery-item:hover img`：CSS選擇器，用於設置滑鼠懸停時魔方圖像的翻轉效果。
6. `.gallery-item .backside`：CSS選擇器，用於設置魔方圖像卡片後面的內容。`transform: rotateY(180deg)`將內容旋轉過來。`box-shadow`是設置卡片背面的陰影效果。
7. `<img>`：用於呈現每個魔方卡片上的圖像。
8. `<div>`：卡片背面的內容，包括圖像描述和陰影效果。
