CSS无限3D滑块

这个教程系列探索仅使用HTML和CSS创建动态图像滑块。 无论图像计数如何，我们都将通过一致的标记和各种CSS样式来证明如何实现多样的结果。 先前的分期付款具有无限旋转的滑块和翻转的宝丽来式滑块。本期将研究成三维滑块。 虽然最初复杂，但许多代码都基于以前的示例进行修改。 该系列的新来者应审查基础背景的早期文章。

> CSS滑块系列摘要

>圆形旋转图像滑块
翻阅宝丽来图像
>无限3D滑块（当前文章）

我们的目标是创建一个视觉吸引人的3D滑块。 乍一看，它类似于旋转的立方体显示四个图像。但是，它实际上利用了战略性地安排的六张图像。 从不同的角度查看滑块可以揭示出这种布置。

>

了解图像布置

>现在我们已经看到了图像布置了，让我们检查代码。>

>基本结构

html与以前的滑块保持一致：

> CSS网格用于堆叠图像：

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

>

>动画实现

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

滑块的逻辑反映了第一篇文章的圆形滑块。 图像形成多边形；完整的旋转返回到初始图像。 较早的滑块利用

和

。 此3D滑块用于3D定位，然后旋转容器。 SASS用于通过图像循环并应用转换： transform-origin animation-delaytransform属性使用三个值：

>

图像的初始旋转。 角度取决于图像计数（n），增加了360度/n。

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
     transform: 
       rotate(#{360*($i - 1) / $n}deg) /* 1 */
       translateY(50% / math.tan(180deg / $n)) /* 2 */ 
       rotateX(90deg); /* 3 */
  }
}

>翻译为对齐中心点。 该距离计算为50％/吨（180Deg/n）。

> transform围绕X轴（90度）旋转以进行所需的布置。

无限循环的容器旋转

最后，旋转容器会产生无限滑块效果：
3. 键框类似于圆形滑块，将容器旋转以显示每个图像。 -90DEG X轴旋转补偿了图像的90度旋转，并且透视图添加了3D效果。

进一步的滑块变化：垂直和立方体滑块

然后，本文探讨了变化：垂直滑块（通过在键框和图像转换中更改为

来实现）和一个立方体滑块（使用六个图像和特定旋转，每张脸部）。 立方体滑块的动画更为复杂，需要在多个轴上仔细编排旋转。还提出了随机的立方体滑块变化，引入了非序列旋转，从而产生更不可预测的效果。rotate() rotateX()结论

>教程结束时，通过突出CSS在使用最小HTML和JavaScript创建复杂动画方面的力量。 该系列展示了CSS用于构建交互式和视觉吸引力的元素的多功能性。

以上是CSS无限3D滑块的详细内容。更多信息请关注PHP中文网其他相关文章！