卡卡網(wǎng)

今天給大家介紹兩個CSS 3D滑塊的動畫效果，水平或垂直方向無限循環(huán)滾動。代碼不多，但出來的效果十分令人贊嘆。

• CSS 3D滑塊動畫——水平方向無限滾動
• CSS 3D滑塊動畫——垂直方向無限滾動

有關(guān)CSS 3D滑塊系列，一共介紹了幾個實例，你或許也有興趣看看：

• CSS 3D立方滑塊，垂直和水平混合無限循環(huán)滾動
• CSS 3D 隨機立方體滑塊

1、CSS 3D滑塊動畫——水平方向無限滾動

demodownload

HTML代碼

HTML代碼結(jié)構(gòu)只有一個div標(biāo)簽，它使用的class名稱為gallery，內(nèi)容是6個并列的img標(biāo)簽，即是6張圖片，這6張圖片共同構(gòu)成一個3D滾動的立方體。

<div class="gallery">
  <img src="1-300x300.jpg" >
  <img src="2-300x300.jpg" >
  <img src="3-300x300.jpg" >
  <img src="4-300x300.jpg" >
  <img src="5-300x300.jpg" >
  <img src="6-300x300.jpg" >
</div>

CSS代碼

.gallery {
  display: grid;
  width: 160px;
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(0.5, -0.2, 0.5, 1.2) infinite;
}

@keyframes r {
  0%, 3% {
    transform: var(--_t) rotate(0deg);
  }
  14.6666666667%, 19.6666666667% {
    transform: var(--_t) rotate(-60deg);
  }
  31.3333333333%, 36.3333333333% {
    transform: var(--_t) rotate(-120deg);
  }
  48%, 53% {
    transform: var(--_t) rotate(-180deg);
  }
  64.6666666667%, 69.6666666667% {
    transform: var(--_t) rotate(-240deg);
  }
  81.3333333333%, 86.3333333333% {
    transform: var(--_t) rotate(-300deg);
  }
  98%, 100% {
    transform: var(--_t) rotate(-360deg);
  }
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.gallery > img:nth-child(1) {
  transform: rotate(0deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(2) {
  transform: rotate(60deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(3) {
  transform: rotate(120deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(4) {
  transform: rotate(180deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(5) {
  transform: rotate(240deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(6) {
  transform: rotate(300deg) translateY(86.6025403784%) rotateX(90deg);
}

代碼解釋

CSS Grid 將圖像放在一個堆棧中，一個在另一個之上：

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

3D 滑塊的實現(xiàn)方法是，使用transform來正確放置所有圖像，然后旋轉(zhuǎn)容器。我們所要做的就是旋轉(zhuǎn)整個容器來創(chuàng)建我們的無限滑塊。

.gallery {
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(0.5, -0.2, 0.5, 1.2) infinite;
}

@keyframes r {
  0%, 3% {
    transform: var(--_t) rotate(0deg);
  }
  14.6666666667%, 19.6666666667% {
    transform: var(--_t) rotate(-60deg);
  }
  31.3333333333%, 36.3333333333% {
    transform: var(--_t) rotate(-120deg);
  }
  48%, 53% {
    transform: var(--_t) rotate(-180deg);
  }
  64.6666666667%, 69.6666666667% {
    transform: var(--_t) rotate(-240deg);
  }
  81.3333333333%, 86.3333333333% {
    transform: var(--_t) rotate(-300deg);
  }
  98%, 100% {
    transform: var(--_t) rotate(-360deg);
  }
}

我們需要 -90deg 沿 x 軸旋轉(zhuǎn)容器才能看到圖像，因為我們已經(jīng) 90deg 在同一軸上旋轉(zhuǎn)了它們。然后我們添加 perspective 以獲得 3D 效果。

使用 CSS，我們可以遍歷圖像數(shù)量并應(yīng)用我們的轉(zhuǎn)換：

.gallery > img:nth-child(1) {
  transform: rotate(0deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(2) {
  transform: rotate(60deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(3) {
  transform: rotate(120deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(4) {
  transform: rotate(180deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(5) {
  transform: rotate(240deg) translateY(86.6025403784%) rotateX(90deg);
}

.gallery > img:nth-child(6) {
  transform: rotate(300deg) translateY(86.6025403784%) rotateX(90deg);
}

2、CSS 3D滑塊動畫——垂直方向無限滾動

demodownload

上面簡單介紹了3D滑塊垂直方向無限滾動的實現(xiàn)方法。既然是3D空間，那么我們可以把之前的滑塊做成豎版，沿 z 軸旋轉(zhuǎn)。

HTML代碼

HTML代碼結(jié)構(gòu)跟上面水平方向滾動的代碼一樣。

<div class="gallery">
  <img src="1-300x300.jpg" >
  <img src="2-300x300.jpg" >
  <img src="3-300x300.jpg" >
  <img src="4-300x300.jpg" >
  <img src="5-300x300.jpg" >
  <img src="6-300x300.jpg" >
</div>

CSS代碼

如果比較此滑塊的兩個版本的CSS代碼，你可能不會立即發(fā)現(xiàn)差異，因為它只有一個字符！在transform關(guān)鍵幀和圖像中rotate()替換為rotateX()。

.gallery {
  display: grid;
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(0.5, -0.2, 0.5, 1.2) infinite;
}

@keyframes r {
  0%, 3% {
    transform: var(--_t) rotateX(0deg);
  }
  14.6666666667%, 19.6666666667% {
    transform: var(--_t) rotateX(-60deg);
  }
  31.3333333333%, 36.3333333333% {
    transform: var(--_t) rotateX(-120deg);
  }
  48%, 53% {
    transform: var(--_t) rotateX(-180deg);
  }
  64.6666666667%, 69.6666666667% {
    transform: var(--_t) rotateX(-240deg);
  }
  81.3333333333%, 86.3333333333% {
    transform: var(--_t) rotateX(-300deg);
  }
  98%, 100% {
    transform: var(--_t) rotateX(-360deg);
  }
}
.gallery > img {
  grid-area: 1/1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

.gallery > img:nth-child(1) {
  transform: rotateX(0deg) translateY(86.6025403784%) rotateX(-90deg);
}

.gallery > img:nth-child(2) {
  transform: rotateX(60deg) translateY(86.6025403784%) rotateX(-90deg);
}

.gallery > img:nth-child(3) {
  transform: rotateX(120deg) translateY(86.6025403784%) rotateX(-90deg);
}

.gallery > img:nth-child(4) {
  transform: rotateX(180deg) translateY(86.6025403784%) rotateX(-90deg);
}

.gallery > img:nth-child(5) {
  transform: rotateX(240deg) translateY(86.6025403784%) rotateX(-90deg);
}

.gallery > img:nth-child(6) {
  transform: rotateX(300deg) translateY(86.6025403784%) rotateX(-90deg);
}

總結(jié)

本文介紹了CSS 3D滑塊動畫效果（水平或垂直方向無限循環(huán)滾動），這是比較常見的兩種3D滑塊效果。代碼不多，理解起來需要一定的空間想象力。但不理解不要緊，代碼復(fù)制粘貼就可以使用，很方便。

如果你想要一個垂直和水平混合無限循環(huán)滾動的3D立方滑塊，那么可以看此文《CSS 3D立方滑塊，垂直和水平無限循環(huán)滾動》。

有關(guān)CSS 3D滑塊系列，一共介紹了幾個實例，你或許也有興趣看看：

• CSS 3D立方滑塊，垂直和水平混合無限循環(huán)滾動
• CSS 3D 隨機立方體滑塊

相關(guān)文章

• [示例詳解]用HTML + CSS創(chuàng)建可拖動的范圍滑塊(Range Slider)
• CSS+JS實現(xiàn)的顏色漸變可拖動滑塊

• 一組精致好看的CSS表單樣式：checkbox、radio、text等
• 純CSS+SVG創(chuàng)建有趣的動畫復(fù)選框checkbox
• 一個具有鼠標(biāo)懸停動畫效果的SVG復(fù)選框checkbox
• 8款SVG創(chuàng)建的動畫checkbox多選框和radio單選框
• CSS示例：漂亮的切換開關(guān)（toggle switches）樣式
• 純CSS：兩個非常漂亮的checkbox和radio按鈕樣式
• 使用SVG實現(xiàn)的漂亮的復(fù)選框（checkbox）樣式
• 兩例純CSS樣式：單選radio/復(fù)選checkbox按鈕
• 文字/div陰影調(diào)色板生成器|CSS技巧
• CSS中id、類、標(biāo)簽的優(yōu)先級是怎樣的？

標(biāo)簽: css  3D滑塊  滑塊