技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS 3D滑塊動畫效果(水平或垂直方向無限循環(huán)滾動)

作者:admin    時(shí)間:2023-2-6 19:14:33    瀏覽:

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

有關(guān)CSS 3D滑塊系列,一共介紹了幾個(gè)實(shí)例,你或許也有興趣看看:

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

demodownload

 

HTML代碼

HTML代碼結(jié)構(gòu)只有一個(gè)div標(biāo)簽,它使用的class名稱為gallery,內(nèi)容是6個(gè)并列的img標(biāo)簽,即是6張圖片,這6張圖片共同構(gòu)成一個(gè)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 將圖像放在一個(gè)堆棧中,一個(gè)在另一個(gè)之上:

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

3D 滑塊的實(shí)現(xiàn)方法是,使用transform來正確放置所有圖像,然后旋轉(zhuǎn)容器。我們所要做的就是旋轉(zhuǎn)整個(gè)容器來創(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)容器才能看到圖像,因?yà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滑塊垂直方向無限滾動的實(shí)現(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代碼

如果比較此滑塊的兩個(gè)版本的CSS代碼,你可能不會立即發(fā)現(xiàn)差異,因?yàn)樗挥幸粋€(gè)字符!在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ù)制粘貼就可以使用,很方便。

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

有關(guān)CSS 3D滑塊系列,一共介紹了幾個(gè)實(shí)例,你或許也有興趣看看:

相關(guān)文章

 

標(biāo)簽: css  3D滑塊  滑塊  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */