純css 實現3d輪播

前言

經常使用網易雲音樂，看見它的首頁輪播圖想本身也實現一個，本文會經過 animation 結合 perspective 等 css 屬性實現3d輪播的效果。讓咱們開始吧！

步驟

爲了簡單起步咱們先使用三張圖片,定義基礎的 html 和 css 結構以下：

1. 咱們設定圖片的寬度 329px ，爲了凸顯出中間這張圖片，左右兩種使用 transform:scale(0.8),而後讓兩邊的圖片的大小縮放 0.8 咱們要作的就是讓圖片動起來就實現了輪播的效果。
2. 動起來還只是平面的移動，爲了實現3d的效果，引入 transform-style 和 perspective 這兩個概念

接下來圍繞這兩點展開分析如何實現。

動起來

選用animation寫動畫

動起來就是動畫能夠經過 css animation 以及 js中的 requestAnimationFrame 這兩種。我選用 animation 做爲實現手段。

分析動起來的階段

只看一張圖的週期分爲三個階段也就是 左邊，中間，右邊，假設咱們在每一個階段都停留2s，那麼整個週期須要6s的時間。爲了讓過渡天然些，每次過渡的時候都預留0.5s過渡時間。那麼過渡時間總共要1.5s 全部時間加起來須要 7.5s

animation使用

1. 使用translateX 來實現圖片 x 軸位置的移動
2. animation-delay 支持負值，如 animation: three-D 7.5s ease -5s infinite; 表示整個過渡時間是 7.5s 因爲 animation-delay 設置爲 -5s 表示已經運動來 5秒也就是來到動畫的 66% 的進度了。

/* 總時長是 7.5s */
@keyframes three-D {
  /* 停留2秒 */
  0%,27%{
    transform: translateX(230.3px) scale(0.8);
    z-index: 1;
  }
  /* 過渡時間爲 0.5s */
  34%,61%{
    z-index: 2;
    transform: translateX(98.7px) scale(1);
  }
  /* 過渡時間爲 0.5s */
  68% ,95%{
    z-index: 1;
    transform: translateX(-32.9px) scale(0.8);
  }
  /* 過渡時間爲 0.5s */
  100% {
    z-index: 1;
    transform: translateX(230.3px) scale(0.8);
  }
}
複製代碼

設置3d效果

給他們的圖片的父級設置視角，展現方式爲3d。更多屬性能夠參考張旭鑫 CSS3 3D文章解釋

transform-style: preserve-3d;
  perspective: 800px;
複製代碼

使用了這個屬性後，咱們能夠在圖片的 左中上三種位置來改變他們不一樣的translateZ的值來實現3d的效果，其實 translateZ 就是改變圖片和用戶的距離，咱們經過 scale(0.8) 已經達到相同的效果，由於距離用戶近也就覺得這圖片要大。
除了改變用戶的距離，咱們還自定義的添加一些屬性如，圖片 rotateY 的角度，來實現開屏的效果。可根據本身的業務須要來添加。

完整demo地址

層級問題

當輪播圖超過3張以上，拿四張來舉例，一張圖的週期須要劃分爲四個階段。以下圖分別在這四個階段，3，4表示在同一個位置，仍是和以前同樣在每一個階段停留 2s 停留總時間爲 8s , 1-2,2-3,4-1須要過渡時間 0.5s 總的過渡時間爲 1.5s 。最終所需時間爲 9.5s 。

若是仍是像三張圖片時只設置了 2 的層級比其餘高，那麼在 3,4這個階段會出現層級問題。因爲1,3,4層級相同，那麼最後一張圖片的時候會一直在左邊的位置會一直蓋住其餘圖片。

我採用的方式是當圖片到了第四個階段就讓他的 opacity 爲 0 ，那麼即便最後一張圖片到了第四個階段也不會遮住上一張。

/* 總時長是 9.5s */
@keyframes three-D {
  /* 停留2秒 */
  0%,21%{
    transform: translateX(230.3px) translateZ(40px) scale(0.8);
    z-index: 3;
  }
  /* 過渡時間爲 0.5s */
  26%,47%{
    z-index: 4;
    transform: translateX(98.7px) scale(1);
  }
  /* 過渡時間爲 0.5s */
  51% ,73%{
    z-index: 2;
    opacity: 1;
    transform: translateX(-32.9px) scale(0.8);
  }
  /* 第三階段圖片隱藏 */
  74%,96%{
    opacity: 0;
    z-index: 1;
    transform: translateX(-32.9px) scale(0.8);
  }
  /* 過渡時間爲 0.5s */
  100% {
    opacity: 1;
    z-index: 1;
    transform: translateX(230.3px) scale(0.8);
  }
}
複製代碼

輪播圖層級問題解決demo源碼

最後

經過css實現了網易雲音樂輪播的效果，若是想要和輪播圖有交互 會用到 animation-play-state 這個屬性，若是業務有需求也能夠加上。最後關於3d輪播圖有好的實現方式能夠在留言區評論。