3d旋轉魔方相冊代碼源碼，html代碼示例

Cloud computing and code 2023年05月15日 12:55 965 visitor

以下是一組HTML代碼源碼示例，用於展示3D旋轉魔方相冊：

3d旋轉魔方相冊代碼源碼，html代碼示例第1张

<!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>`：卡片背面的內容，包括圖像描述和陰影效果。