構(gòu)建一個(gè)交互式的3D旋轉(zhuǎn)輪播圖，使用CSS 3D轉(zhuǎn)換和JavaScript增強(qiáng)網(wǎng)頁圖像或內(nèi)容的動(dòng)態(tài)展示效果。本文將逐步指導(dǎo)您如何創(chuàng)建這個(gè)組件。

我最初研究這個(gè)主題時(shí)，并不需要一個(gè)3D輪播圖，而更關(guān)注其具體的實(shí)現(xiàn)細(xì)節(jié)。核心技術(shù)當(dāng)然是來自CSS Transforms Module Level 1，但在此過程中，將應(yīng)用許多其他前端開發(fā)技術(shù)，涉及CSS、Sass和客戶端JavaScript的各個(gè)方面。

這個(gè)CodePen展示了不同版本的組件，我將向您展示如何構(gòu)建它們。

為了說明CSS 3D轉(zhuǎn)換的設(shè)置，我將向您展示組件的純CSS版本。然后，我將向您展示如何使用JavaScript增強(qiáng)它，開發(fā)一個(gè)簡單的組件腳本。

關(guān)鍵要點(diǎn)

• 使用CSS 3D轉(zhuǎn)換和JavaScript創(chuàng)建一個(gè)交互式的3D旋轉(zhuǎn)輪播圖，從而在網(wǎng)頁上更動(dòng)態(tài)地展示圖像或內(nèi)容。
• 通過將圖像排列在圓形3D空間中來構(gòu)建輪播圖，使用基于圖像數(shù)量的多邊形近似值，并通過JavaScript增強(qiáng)來控制可見性和導(dǎo)航。
• 通過在CSS中使用媒體查詢和基于百分比的大小調(diào)整，實(shí)現(xiàn)輪播圖的自適應(yīng)設(shè)計(jì)，確保它能夠適應(yīng)不同的屏幕尺寸和設(shè)備方向。
• 通過HTML和JavaScript添加導(dǎo)航控件來增強(qiáng)用戶交互，使用戶能夠手動(dòng)循環(huán)瀏覽輪播圖項(xiàng)目。
• 探索高級(jí)自定義選項(xiàng)，例如自動(dòng)播放功能、過渡效果、無限循環(huán)以及添加文本或不同形狀，提供靈活的自定義選項(xiàng)以滿足特定設(shè)計(jì)需求。

輪播圖的標(biāo)記

對(duì)于標(biāo)記，組件內(nèi)的圖像被包裝在一個(gè)<figure></figure>元素中，它提供了一個(gè)基本的框架：

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

這將是我們的起點(diǎn)。

輪播圖的幾何結(jié)構(gòu)

在查看CSS之前，讓我們概述一下將在以下部分開發(fā)的計(jì)劃。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151412585.jpg" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " /></p> <p>因此，這種多邊形的邊數(shù)與輪播圖中的圖像數(shù)量相同：三個(gè)圖像的多邊形是等邊三角形；四個(gè)圖像是正方形；五個(gè)是五邊形；等等：</p> <p>如果輪播圖中的圖像少于三個(gè)怎么辦？多邊形無法定義，以下過程無法按原樣應(yīng)用。無論如何，只有一個(gè)圖像的情況相當(dāng)沒用；兩個(gè)圖像稍微更可能，它們可以放置在圓圈上兩個(gè)直徑相對(duì)的點(diǎn)上。為簡單起見，這些特殊情況未處理，并假定至少有三個(gè)圖像。但是，相關(guān)的代碼修改并不難。</p><p>這個(gè)虛構(gòu)的參考多邊形將位于3D空間中，垂直于視口的平面，并且其中心向屏幕后推，距離等于其旁心距（多邊形的一條邊到其中心的距離），如下圖所示：</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151540038.jpg" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " /></p> <p>這樣，當(dāng)前面向觀看者的邊將位于屏幕平面z = 0處，而前部圖像不受透視縮短的影響，將具有其普通的2D大小。圖片中的d字母代表CSS perspective屬性的值。</p> <p><strong>構(gòu)建輪播圖幾何結(jié)構(gòu)</strong></p> <p>在本節(jié)中，我將向您展示關(guān)鍵的CSS規(guī)則，我將逐步講解。</p> <p>在以下代碼片段中，使用一些Sass變量來使組件更易于配置。我將使用<code>$n表示輪播圖中的圖像數(shù)量，使用$item-width指定圖像的寬度。

<figure>元素是第一個(gè)圖像的包含框，也是其他圖像圍繞其定位和轉(zhuǎn)換的參考元素。假設(shè)現(xiàn)在輪播圖只有一個(gè)圖像要展示，我可以從大小和對(duì)齊開始：

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

<figure>元素具有規(guī)定的輪播項(xiàng)目寬度，并且具有與圖像相同的高度（它們可以具有不同的尺寸，但必須具有相同的縱橫比）。這樣，輪播容器高度會(huì)根據(jù)圖像高度自動(dòng)調(diào)整。此外，<figure>在輪播容器中水平居中。

第一個(gè)圖像不需要額外的轉(zhuǎn)換，因?yàn)樗呀?jīng)在其目標(biāo)位置，即輪播圖的正面。

可以通過對(duì)<figure>元素應(yīng)用旋轉(zhuǎn)變換來在3D空間中旋轉(zhuǎn)輪播圖。此旋轉(zhuǎn)必須圍繞多邊形的中心進(jìn)行，因此我將更改<figure>的默認(rèn)transform-origin：

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

此值取反，因?yàn)樵贑SS中，z軸的正方向是離開屏幕，朝向觀看者。需要括號(hào)以避免Sass語法錯(cuò)誤。多邊形旁心距的計(jì)算將在后面解釋。

轉(zhuǎn)換了<figure>元素的參考系統(tǒng)后，整個(gè)輪播圖可以通過其（新的）y軸旋轉(zhuǎn)來旋轉(zhuǎn)：

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

我稍后將返回此旋轉(zhuǎn)的詳細(xì)信息。

讓我們繼續(xù)進(jìn)行其他圖像的轉(zhuǎn)換。使用絕對(duì)定位，圖像堆疊在<figure>內(nèi)部：

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

z-index值被忽略，因?yàn)檫@只是后續(xù)轉(zhuǎn)換的初步步驟。事實(shí)上，現(xiàn)在每個(gè)圖像都可以圍繞輪播圖的y軸旋轉(zhuǎn)一個(gè)角度，該角度取決于分配圖像的多邊形邊。首先，與<figure>元素一樣，修改圖像的默認(rèn)transform-origin，將其移動(dòng)到多邊形的中心：

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

然后，圖像可以圍繞其新的y軸旋轉(zhuǎn)一個(gè)量，該量由($i - 1) * $theta弧度給出，其中$i是圖像的索引（從1開始），$theta = 2 * $PI / $n，其中$PI表示數(shù)學(xué)常數(shù)π。因此，第二個(gè)圖像將旋轉(zhuǎn)$theta，第三個(gè)旋轉(zhuǎn)2 * $theta，依此類推，直到最后一個(gè)圖像旋轉(zhuǎn)($n - 1) * $theta。

由于嵌套CSS轉(zhuǎn)換的層次性質(zhì)，在輪播圖旋轉(zhuǎn)（即圍繞<figure>修改后的y軸旋轉(zhuǎn)）期間，圖像的這種相對(duì)排列將被保留。

可以使用Sass @for控制指令分配此每個(gè)圖像的旋轉(zhuǎn)量：

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

這是使用for...through結(jié)構(gòu)而不是for...to，因?yàn)閷?duì)于for...to，分配給索引變量$i的最后一個(gè)值將是n-1而不是n。

請(qǐng)注意Sass的#{}插值語法的兩個(gè)實(shí)例。在第一個(gè)實(shí)例中，它用于:nth-child()選擇器的索引；在第二個(gè)實(shí)例中，它用于設(shè)置旋轉(zhuǎn)屬性值。

計(jì)算旁心距

多邊形旁心距的計(jì)算取決于邊數(shù)和邊的寬度，即取決于$n和$item-width變量。公式是：

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

其中tan()是正切三角函數(shù)。

這個(gè)公式可以通過一些幾何和三角學(xué)推導(dǎo)出來。在筆的源代碼中，此公式未按原樣實(shí)現(xiàn)，因?yàn)檎泻瘮?shù)在Sass中不可用，因此使用了硬編碼值。相反，該公式將在JavaScript演示中完全實(shí)現(xiàn)。

間隔輪播項(xiàng)目

此時(shí)，輪播圖像并排“縫合”，形成所需的多邊形形狀。但是在這里，它們緊密地堆積在一起，而在3D輪播圖中，它們之間通常會(huì)有空間。這種距離增強(qiáng)了3D空間的感知，因?yàn)樗试S您看到輪播圖背面朝后的圖像。

可以通過引入另一個(gè)配置變量$item-separation并將其用作每個(gè)<img alt="用CSS和JavaScript構(gòu)建3D旋轉(zhuǎn)的輪播" >元素的水平填充來可選地添加圖像之間的此間隙。更準(zhǔn)確地說，取此值的一半作為左填充和右填充：

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

最終結(jié)果可以在以下演示中看到：（此處應(yīng)插入CodePen鏈接，展示間隔輪播項(xiàng)目）

圖像使用opacity屬性變?yōu)榘胪该饕愿玫卣f明輪播結(jié)構(gòu)，并且輪播根元素上的flex布局用于將其在視口中垂直居中。

旋轉(zhuǎn)輪播圖

為了方便測(cè)試輪播圖旋轉(zhuǎn)，我將添加一個(gè)UI控件來在圖像之間來回導(dǎo)航。（此處應(yīng)插入CodePen鏈接，展示旋轉(zhuǎn)輪播圖）

我們使用一個(gè)currImage整數(shù)變量來指示哪個(gè)圖像位于輪播圖的前面。當(dāng)用戶與上一個(gè)/下一個(gè)按鈕交互時(shí)，此變量會(huì)增加或減少一個(gè)單位。

更新currImage后，輪播圖旋轉(zhuǎn)將通過以下方式執(zhí)行：

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

（此處以及以下代碼片段中，使用ES6模板字面量在字符串中插入表達(dá)式；如果您愿意，可以使用傳統(tǒng)的“ ”連接運(yùn)算符）

其中theta與之前相同：

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

旋轉(zhuǎn)是-theta，因?yàn)橐獙?dǎo)航到下一個(gè)項(xiàng)目，需要逆時(shí)針旋轉(zhuǎn)，并且這種旋轉(zhuǎn)值在CSS轉(zhuǎn)換中為負(fù)值。

請(qǐng)注意，currImage值不受限于[0, numImages – 1]范圍，而是可以無限增長，在正方向和負(fù)方向上都可以。事實(shí)上，如果前面的圖像是最后一個(gè)（所以currImage == n-1），并且用戶單擊下一個(gè)按鈕，如果我們將currImage重置為0以前進(jìn)到第一個(gè)輪播圖像，則旋轉(zhuǎn)角度將從(n-1)*theta轉(zhuǎn)換為0，這將使輪播圖在所有之前的圖像上向相反方向旋轉(zhuǎn)。當(dāng)單擊上一個(gè)按鈕時(shí)，如果前面的圖像是第一個(gè)，則會(huì)出現(xiàn)類似的問題。

為了挑剔，我甚至應(yīng)該檢查currentImage的潛在溢出，因?yàn)?code>Number數(shù)據(jù)類型不能取任意大的值。這些檢查未在演示代碼中實(shí)現(xiàn)。

使用JavaScript增強(qiáng)

在看到構(gòu)成輪播圖核心的基本CSS之后，現(xiàn)在可以使用JavaScript以多種方式增強(qiáng)組件，例如：

• 任意數(shù)量的圖像
• 百分比寬度的圖像
• 頁面上的多個(gè)輪播實(shí)例
• 每個(gè)實(shí)例的配置，例如間隙大小和背面可見性
• 使用HTML5數(shù)據(jù)-*屬性進(jìn)行配置

首先，我從樣式表中刪除與轉(zhuǎn)換原點(diǎn)和旋轉(zhuǎn)相關(guān)的變量和規(guī)則，因?yàn)檫@些將使用JavaScript完成：（此處應(yīng)插入更新后的CSS代碼）

接下來，腳本中的carousel()函數(shù)負(fù)責(zé)實(shí)例的初始化：

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

root參數(shù)指的是保存輪播圖的DOM元素。

通常，此函數(shù)將是一個(gè)構(gòu)造函數(shù)，為頁面上的每個(gè)輪播圖生成一個(gè)對(duì)象，但在這里我沒有編寫輪播庫，因此簡單的函數(shù)就足夠了。

為了在同一頁面上實(shí)例化多個(gè)組件，代碼等待所有圖像加載，為window對(duì)象注冊(cè)load事件的偵聽器，然后為每個(gè)具有carousel類的元素調(diào)用carousel()：

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

carousel()執(zhí)行三個(gè)主要任務(wù)：

• 導(dǎo)航設(shè)置。這與第二個(gè)CodePen演示中介紹的代碼相同。
• 轉(zhuǎn)換設(shè)置
• 注冊(cè)窗口大小調(diào)整偵聽器以保持輪播圖自適應(yīng)，使其適應(yīng)新的視口大小

在檢查轉(zhuǎn)換設(shè)置代碼之前，我將介紹一些關(guān)鍵變量以及如何根據(jù)實(shí)例配置初始化它們：

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

圖像數(shù)量（n）根據(jù)<figure>元素的子元素?cái)?shù)量初始化?；脽羝g的間距（gap）從HTML5 data-gap屬性（如果設(shè)置）初始化。背面可見性標(biāo)志（bfc）使用HTML5的dataset API讀取。這將在稍后用于確定輪播圖背面的圖像是否可見。

設(shè)置CSS轉(zhuǎn)換

設(shè)置CSS轉(zhuǎn)換相關(guān)屬性的代碼封裝在setupCarousel()中。此嵌套函數(shù)有兩個(gè)參數(shù)。第一個(gè)是輪播圖中的項(xiàng)目數(shù)量，即上面介紹的n變量。第二個(gè)參數(shù)s是輪播圖多邊形的邊長。正如我前面提到的，這等于圖像的寬度，因此可以使用getComputedStyle()讀取其中一個(gè)的當(dāng)前寬度：

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

這樣，圖像寬度可以使用百分比值設(shè)置。

為了保持輪播圖自適應(yīng)，我注冊(cè)了一個(gè)窗口大小調(diào)整事件的偵聽器，該偵聽器再次使用（可能已修改的）圖像大小調(diào)用setupCarousel()：

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

為簡單起見，我沒有去抖動(dòng)大小調(diào)整偵聽器。

setupCarousel()做的第一件事是使用傳遞的參數(shù)和前面討論的公式計(jì)算多邊形的旁心距：

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

然后，此值用于修改<figure>元素的transform-origin，以獲得輪播圖的新旋轉(zhuǎn)軸：

.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}

接下來，應(yīng)用圖像的樣式：

.img:not(:first-of-type) {
  transform-origin: 50% 50% (-$apothem);
}

第一個(gè)循環(huán)為輪播項(xiàng)目之間的空間分配填充。第二個(gè)循環(huán)設(shè)置3D轉(zhuǎn)換。最后一個(gè)循環(huán)處理背面，如果在輪播圖配置中指定了相關(guān)標(biāo)志。

最后，調(diào)用rotateCarousel()以將當(dāng)前圖像移到前面。這是一個(gè)小的輔助函數(shù)，給定要顯示的圖像的索引，它會(huì)圍繞其y軸旋轉(zhuǎn)<figure>元素以將目標(biāo)圖像移動(dòng)到前面。導(dǎo)航代碼也使用它來回移動(dòng)：

.carousel figure img {
  @for $i from 2 through $n {
    &:nth-child(#{$i}) {
      transform: rotateY(#{($i - 1) * $theta}rad);
    }
  }
}

這是最終結(jié)果，一個(gè)演示，其中實(shí)例化了幾個(gè)輪播圖，每個(gè)輪播圖都有不同的配置：（此處應(yīng)插入最終CodePen鏈接）

來源和結(jié)論

在結(jié)束之前，我只是想感謝一些用于研究本教程的來源：（此處應(yīng)列出參考來源）

如果您對(duì)代碼或輪播圖的功能有任何疑問或意見，請(qǐng)隨時(shí)在下面留言。

關(guān)于使用CSS和JavaScript構(gòu)建3D旋轉(zhuǎn)輪播圖的常見問題解答（FAQ）

如何使我的3D旋轉(zhuǎn)輪播圖自適應(yīng)？

使您的3D旋轉(zhuǎn)輪播圖自適應(yīng)涉及在CSS中使用媒體查詢。媒體查詢?cè)试S您根據(jù)設(shè)備的屏幕尺寸為不同的設(shè)備應(yīng)用不同的樣式。您可以調(diào)整輪播圖元素的大小和位置以適應(yīng)較小的屏幕。此外，還要考慮移動(dòng)設(shè)備的觸摸事件，因?yàn)樗鼈儾幌衽_(tái)式機(jī)那樣具有懸停狀態(tài)。

我可以向輪播圖添加更多幻燈片嗎？

是的，您可以向輪播圖添加更多幻燈片。在HTML結(jié)構(gòu)中，您可以在無序列表中添加更多列表項(xiàng)。每個(gè)列表項(xiàng)代表一個(gè)幻燈片。請(qǐng)記住調(diào)整CSS中每個(gè)幻燈片的旋轉(zhuǎn)角度以正確地在3D空間中定位它們。

如何向輪播圖添加導(dǎo)航按鈕？

可以使用HTML和JavaScript向輪播圖添加導(dǎo)航按鈕。在您的HTML中，添加兩個(gè)用于上一個(gè)和下一個(gè)導(dǎo)航的按鈕。在您的JavaScript中，向這些按鈕添加事件偵聽器。單擊時(shí)，它們應(yīng)該更新輪播圖的旋轉(zhuǎn)以顯示上一個(gè)或下一個(gè)幻燈片。

我可以使用圖像而不是純色作為幻燈片嗎？

當(dāng)然，您可以使用圖像作為幻燈片。不要在CSS中設(shè)置背景顏色，而是可以為每個(gè)幻燈片設(shè)置背景圖像。確保圖像具有正確的大小和分辨率，以獲得最佳視覺效果。

如何向輪播圖添加自動(dòng)播放功能？

可以使用JavaScript添加自動(dòng)播放功能。您可以使用setInterval函數(shù)在一段時(shí)間后自動(dòng)更新輪播圖的旋轉(zhuǎn)。請(qǐng)記住在用戶與輪播圖交互時(shí)清除間隔，以防止出現(xiàn)意外行為。

我可以向輪播圖添加過渡效果嗎？

是的，您可以使用CSS向輪播圖添加過渡效果。transition屬性允許您在指定持續(xù)時(shí)間內(nèi)動(dòng)畫化CSS屬性的變化。您可以將其應(yīng)用于transform屬性以動(dòng)畫化輪播圖的旋轉(zhuǎn)。

如何使輪播圖無限循環(huán)？

使輪播圖無限循環(huán)涉及一些JavaScript。當(dāng)輪播圖到達(dá)最后一個(gè)幻燈片時(shí)，您可以將其旋轉(zhuǎn)重置為第一個(gè)幻燈片。這給人一種無限循環(huán)的錯(cuò)覺。

我可以在幻燈片上添加文本嗎？

是的，您可以在幻燈片上添加文本。在您的HTML中，您可以在每個(gè)列表項(xiàng)中添加文本元素。在您的CSS中，根據(jù)幻燈片的位置定位文本元素并根據(jù)需要對(duì)其進(jìn)行樣式設(shè)置。

如何向輪播圖添加淡入淡出效果？

可以使用CSS添加淡入淡出效果。您可以將opacity屬性與transition屬性結(jié)合使用以動(dòng)畫化淡入淡出效果。根據(jù)幻燈片在輪播圖中的位置調(diào)整其opacity以創(chuàng)建所需的效果。

我可以使用不同的形狀作為輪播圖嗎？

是的，您可以使用不同的形狀作為輪播圖。輪播圖的形狀由CSS中的transform屬性確定。通過調(diào)整transform屬性的值，您可以創(chuàng)建立方體、圓柱體或任何其他3D形狀的輪播圖。

以上是用CSS和JavaScript構(gòu)建3D旋轉(zhuǎn)的輪播的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！