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

技术频道 - html技术

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

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

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

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

demo download

实例介绍：立方滑块

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

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

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