技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

技术频道 - html技术

CSS 3D滑块动画效果(水平或垂直方向无限循环滚动)

作者:admin    时间:2023-2-6 19:14:33    浏览:

今天给大家介绍两个CSS 3D滑块的动画效果，水平或垂直方向无限循环滚动。代码不多，但出来的效果十分令人赞叹。

有关CSS 3D滑块系列，一共介绍了几个实例，你或许也有兴趣看看：

1、CSS 3D滑块动画——水平方向无限滚动

demodownload

 

HTML代码

HTML代码结构只有一个div标签，它使用的class名称为gallery，内容是6个并列的img标签，即是6张图片，这6张图片共同构成一个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 滑块的实现方法是，使用transform来正确放置所有图像，然后旋转容器。我们所要做的就是旋转整个容器来创建我们的无限滑块。

.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 轴旋转容器才能看到图像，因为我们已经 90deg 在同一轴上旋转了它们。然后我们添加 perspective 以获得 3D 效果。

使用 CSS，我们可以遍历图像数量并应用我们的转换：

.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滑块垂直方向无限滚动的实现方法。既然是3D空间，那么我们可以把之前的滑块做成竖版，沿 z 轴旋转。

HTML代码

HTML代码结构跟上面水平方向滚动的代码一样。

<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代码，你可能不会立即发现差异，因为它只有一个字符！在transform关键帧和图像中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);
}

总结

本文介绍了CSS 3D滑块动画效果（水平或垂直方向无限循环滚动），这是比较常见的两种3D滑块效果。代码不多，理解起来需要一定的空间想象力。但不理解不要紧，代码复制粘贴就可以使用，很方便。

如果你想要一个垂直和水平混合无限循环滚动的3D立方滑块，那么可以看此文《CSS 3D立方滑块，垂直和水平无限循环滚动》。

有关CSS 3D滑块系列，一共介绍了几个实例，你或许也有兴趣看看：

相关文章

 

标签: css  3D滑块  滑块  
x
  • 站长推荐
search
/* 左侧显示文章内容目录 */