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

赞助商

分类目录

赞助商

最新文章

搜索

CSS 3D立方滑块,垂直和水平无限循环滚动

作者:admin    时间:2023-2-7 12:19:2    浏览:

在上一文中,我介绍了两个CSS 3D滑块,水平方向或垂直方向无限循环滚动,上文介绍的3D滑块,滚动方向是单一的,水平方向或者垂直方向。在本文中,我将更进一步,介绍一个CSS 3D立方滑块,垂直和水平混合无限循环滚动。

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

demodownload

实例介绍:立方滑块

这个版本的滑块背后的想法是用图像创建一个实际的立方体形状,并围绕不同的轴旋转整个物体。因为它是一个立方体,所以要处理六个面。使用六张图片,一张代表立方体的每个面。

因为有六个面,所以需要至少执行六次旋转,以便每张图像都转一圈。实际上,我们需要五次旋转——最后一次将带回第一张图像的面。如果你去拿一个魔方——或者像骰子这样的其他立方体形状的物体——然后用手旋转它,你就会很清楚在做什么。

.gallery {
  --s: 250px; /* the size */

  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

@keyframes r {
  0%, 3%   { transform: var(--_p); }
  14%, 19% { transform: var(--_p) rotateX(90deg); }
  31%, 36% { transform: var(--_p) rotateX(90deg) rotateZ(90deg); }
  47%, 52% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  64%, 69% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  81%, 86% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  97%, 100%{ transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
}

transform属性从零旋转开始,在每个状态上,在特定轴上附加一个新的旋转,直到达到六次旋转。然后回到第一张图片。

不要忘记图像的位置,使用以下方法将每个transform应用到立方体的一个面上:

.gallery img {
  grid-area: 1 / 1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t,) translateZ(calc(var(--s) / 2));
}
.gallery img:nth-child(2) { --_t: rotateX(-90deg); }
.gallery img:nth-child(3) { --_t: rotateY( 90deg) rotate(-90deg); }
.gallery img:nth-child(4) { --_t: rotateX(180deg) rotate( 90deg); }
.gallery img:nth-child(5) { --_t: rotateX( 90deg) rotate( 90deg); }
.gallery img:nth-child(6) { --_t: rotateY(-90deg); }

里面的逗号为什么用var()?是打错了吗?

这不是打字错误,所以不要删除它!如果删除它,你会注意到它会影响第一张图片的位置。你可以看到,在代码中,--_t为除第一个图像之外的所有图像都定义了,该逗号使变量退回到空值。没有逗号,将没有回退,整个值将无效。

注意:var(--a,)是一个有效函数,指定如果--a自定义属性无效或缺失,var()则应将 ` 替换为空。

完整HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
<style>
.gallery {
  --s: 250px; /* the size */
  
  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5);
}
.gallery img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
}
.gallery img:nth-child(2) {--_t: rotateX(-90deg)}
.gallery img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.gallery img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.gallery img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.gallery img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes r {
  0%,3%   {transform: var(--_p)}
  14%,19% {transform: var(--_p) rotateX(90deg)}
  31%,36% {transform: var(--_p) rotateX(90deg) rotateZ(90deg)}
  47%,52% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
  64%,69% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg)}
  81%,86% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg)}
  97%,100%{transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #556270;
  animation: b 9s infinite;
}

@keyframes b {
  0%,3%   {background: #774F38}
  14%,19% {background: #C5E0DC}
  31%,36% {background: #036564}
  45%,55% {background: #B38184}
  64%,69% {background: #424254}
  81%,86% {background: #4DBCE9}
  97%,to  {background: #774F38}
}
</style>

</head>

<body>

<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>

</body>

</html>

总结

本文介绍了一个CSS 3D立方滑块,垂直和水平混合无限循环滚动。如果你只需要单方向滚动——垂直方向无限循环滚动,或者水平方向无限循环滚动,那么可以看此文《CSS 3D滑块动画效果(水平或垂直方向无限循环滚动)》。

相关文章

标签: css  3D滑块  滑块  
x
  • 站长推荐