這次帶來(lái)一個(gè)比較常見(jiàn)的案例，3d 輪播圖，就像這樣的：

這個(gè)輪播圖有幾個(gè)需要實(shí)現(xiàn)的點(diǎn)：

1. 3d 視覺(jué)，也就是中間大，兩邊小。
2. 自動(dòng)輪播，鼠標(biāo)放上自動(dòng)暫停。
3. 點(diǎn)擊任意卡片會(huì)立即跳轉(zhuǎn)到該卡片。

這次借助:has來(lái)實(shí)現(xiàn)這樣的功能，相信可以帶來(lái)不一樣的思路，一起看看吧！

溫馨提醒：兼容性要求需要 Chrome 101+，并且開(kāi)始實(shí)驗(yàn)特性（105+正式支持），Safari 15.4+，F(xiàn)irefox 官方說(shuō)開(kāi)啟實(shí)驗(yàn)特性可以支持，但是實(shí)測(cè)并不支持。

一、3d 視覺(jué)樣式

這一部分才是重點(diǎn)。

首先我們來(lái)簡(jiǎn)單布局一下，假設(shè)HTML是這樣的：

<div class="view" id="view">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item current">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

為了盡可能減少?gòu)?fù)雜度，我們可以將所有的變化都集中在一個(gè)類(lèi)名上。

比如.current?表示當(dāng)前選中項(xiàng)，也就是中間的那項(xiàng)。這里采用絕對(duì)定位的方式，將所有卡片項(xiàng)都堆疊在一起，然后設(shè)置3d?視圖，將卡片的Z?軸往后移動(dòng)一段距離，讓.current在所有卡片的最前面，實(shí)現(xiàn)近大遠(yuǎn)小的效果，具體實(shí)現(xiàn)如下：

.view {
  position: relative;
  width: 400px;
  height: 250px;
  transform-style: preserve-3d;
 perspective: 500px;
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: grid;
  place-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  transform: translate3d(0, 0, -100px);
}
.item.current {
  transform: translate3d(0, 0, 0);
}

效果如下：

其實(shí)層級(jí)是這樣的，可以在 Chrome 圖層中看到：

現(xiàn)在，我們需要讓相鄰左右兩邊的都漏出來(lái)，右邊的比較容易，用相鄰兄弟選擇器??+??就可以了

.item.current + .item{
  transform: translate3d(30%, 0, -100px);
}

那相鄰左邊的呢？以前是無(wú)解的，只能通過(guò) JS 分別設(shè)置不同的類(lèi)名，非常麻煩，但現(xiàn)在有了??:has??偽類(lèi)，也可以輕松實(shí)現(xiàn)了，如下

.item:has(+.item.current){
  transform: translate3d(-30%, 0, -100px);
}

效果如下：

不過(guò)還有一些臨界情況，比如在第一個(gè)卡片時(shí)，由于前面沒(méi)有兄弟節(jié)點(diǎn)了，所以就成了這樣。

所以需要再在第一個(gè)元素時(shí)，把最后一個(gè)元素放在它的左邊，第一個(gè)元素是:first-child?，最后一個(gè)元素是:last-child，所以實(shí)現(xiàn)是這樣的（最后一個(gè)元素處理同理）。

.item.current:first-child ~ .item:last-child {
  transform: translate3d(-30%, 0, -100px);
  opacity: 1;
}
.item:first-child:has(~ .item.current:last-child) {
  transform: translate3d(30%, 0, -100px);
  opacity: 1;
}

這樣就處理好了邊界情況。

進(jìn)一步，還可以向兩側(cè)露出兩個(gè)卡片，實(shí)現(xiàn)也是類(lèi)似的，完整實(shí)現(xiàn)如下：

/*當(dāng)前項(xiàng)*/
.item.current {
  transform: translate3d(0, 0, 0);
}
/*當(dāng)前項(xiàng)右1*/
.item.current + .item,
.item:first-child:has(~ .item.current:last-child) {
  transform: translate3d(30%, 0, -100px);
}
/*當(dāng)前項(xiàng)左1*/
.item:has(+ .item.current),
.item.current:first-child ~ .item:last-child {
  transform: translate3d(-30%, 0, -100px);
}
/*當(dāng)前項(xiàng)右2*/
.item.current + .item + .item,
.item:first-child:has(~ .item.current:nth-last-child(2)), 
.item:nth-child(2):has(~ .item.current:last-child) {
  transform: translate3d(50%, 0, -150px);
}
/*當(dāng)前項(xiàng)左2*/
.item:has(+.item + .item.current),
.item.current:first-child ~ .item:nth-last-child(2),
.item.current:nth-child(2) ~ .item:last-child{
  transform: translate3d(-50%, 0, -150px);
}

這樣就實(shí)現(xiàn)了關(guān)于.current的全部樣式處理了，只用一個(gè)變量就控制了所有變化。

二、自動(dòng)輪播和暫停

有了上面的處理，接下來(lái)的邏輯就非常簡(jiǎn)單了，只需要通過(guò)js動(dòng)態(tài)控制.current的變化就行了。

一般情況下，我們可能會(huì)想到用定時(shí)器setInterval，但這里，我們也可以不使用定時(shí)器，借助 CSS 動(dòng)畫(huà)的力量，可以更輕松地完整這樣的交互。

要做的事情很簡(jiǎn)單，給容器添加一個(gè)無(wú)關(guān)緊要的 CSS 動(dòng)畫(huà)。

.view {
  /**/
  animation: scroll 3s infinite;
}
@keyframes scroll {
  to {
    transform: translateZ(.1px); /*無(wú)關(guān)緊要的動(dòng)畫(huà)樣式*/
  }
}

這樣就得到了一個(gè)時(shí)長(zhǎng)為3s，無(wú)限循環(huán)的動(dòng)畫(huà)了。

然后，監(jiān)聽(tīng)animationiteration?事件，這個(gè)事件在動(dòng)畫(huà)每次運(yùn)行一次就會(huì)回調(diào)一次，在這里也就是每3s?運(yùn)行一次，就像setInterval的功能一樣

GlobalEventHandlers.onanimationiteration - Web API 接口參考 | MDN (mozilla.org)[1]。

在animationiteration?回調(diào)中處理.current?邏輯，很簡(jiǎn)單，移除當(dāng)前的.current?，給下一個(gè)添加.current，注意一下邊界就行了，具體實(shí)現(xiàn)如下：

view.addEventListener("animationiteration", () => {
  const current = view.querySelector(".current") || view.firstElementChild;
  current.classList.remove("current");
  if (current.nextElementSibling) {
    current.nextElementSibling.classList.add("current");
  } else {
    view.firstElementChild.classList.add("current");
  }
});

使用animationiteration的最大好處是，可以直接通過(guò) CSS 進(jìn)行動(dòng)畫(huà)的控制，再也無(wú)需監(jiān)聽(tīng)鼠標(biāo)移入移出事件了。

.view:hover{
  animation-play-state: paused;
}

效果如下（方便演示，速度調(diào)快了）。

三、點(diǎn)擊快速切換

點(diǎn)擊切換，我其實(shí)最先想到的是通過(guò):checked，也就是類(lèi)似單選，比如：

<div class="view" id="view">
  <label class="item"><input type="radio" checked name="item"></label>
  <label class="item"><input type="radio" name="item"></label>
  <label class="item"><input type="radio" name="item"></label>
  <label class="item"><input type="radio" name="item"></label>
  <label class="item"><input type="radio" name="item"></label>
  <label class="item"><input type="radio" name="item"></label>
</div>

但是目前來(lái)看??:has??偽類(lèi)貌似不支持多層嵌套，比如下面這條語(yǔ)句。

.item:has(+.item:has(:checked)){
  /*不生效*/
}

.item:has(:checked)選中的是子元素被選中的父級(jí)，然后.item:has(+.item:has(:checked))表示選中它的前面一個(gè)兄弟節(jié)點(diǎn)，這樣就能實(shí)現(xiàn)選中功能了，可惜現(xiàn)在并不支持??（以后可能支持）。

沒(méi)辦法，只能通過(guò)傳統(tǒng)方式來(lái)實(shí)現(xiàn)，直接綁定監(jiān)聽(tīng)click事件。

view.addEventListener("click", (ev) => {
  const current = view.querySelector(".current") || view.firstElementChild;
  current.classList.remove("current");
  ev.target.closest('.item').classList.add("current");
});

效果如下：

完整代碼可以查看線上 demo：CSS 3d scroll (codepen.io)[2]或者CSS 3dscroll(runjs.work)[3]。

四、總結(jié)一下

以上就是借助:has偽類(lèi)來(lái)實(shí)現(xiàn)一個(gè)3d輪播圖的全部細(xì)節(jié)了，所有的視覺(jué)變化全部在 CSS 中完成，JS 只需要處理切換邏輯就行了，相比以前而言，實(shí)現(xiàn)上更加簡(jiǎn)潔和優(yōu)雅，下面總結(jié)一下。

1. 3d 視覺(jué)樣式可以通過(guò)transform-style: preserve-3d;實(shí)現(xiàn)近大遠(yuǎn)小的效果。
2. 通過(guò).item:has(+.item.current)可以設(shè)置當(dāng)前項(xiàng)前面的兄弟節(jié)點(diǎn)。
3. 還需要考慮第一個(gè)和最后一個(gè)這兩種臨界情況。
4. 輪播圖自動(dòng)輪播和暫?？梢越柚鷄nimationiteration?回調(diào)，這種方式的優(yōu)勢(shì)是可以通過(guò):hover控制。
5. :has偽類(lèi)貌似不支持多層嵌套，希望以后可以支持吧~

:has非常強(qiáng)大，目前唯一的缺陷在于兼容性。好在瀏覽器對(duì)于這一新特性跟進(jìn)的都比較積極，明年這個(gè)時(shí)候差不多可以在內(nèi)部項(xiàng)目用起來(lái)了。

參考資料

?[1]GlobalEventHandlers.onanimationiteration - Web API 接口參考 | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationiteration_event。

[2]CSS 3d scroll (codepen.io): https://codepen.io/xboxyan/pen/PoeGjdg。

[3]CSS 3dscroll(runjs.work): https://runjs.work/projects/6a42a4c284e4442c。?