如何使用 CSS 制作旋转木马？

简介

旋转木马是一种常见的轮播图效果，可以让网站更加生动有趣。在本文中，我们将使用 CSS 制作一个基本的旋转木马，并提供相关代码示例供参考。

实现方式

我们可以使用 CSS3 中的 transform 属性和 @keyframe 规则来实现旋转木马效果。

1. 准备工作

首先，在 HTML 文件中创建一个容器 div 并添加多个图片元素作为容器的子元素。

<div class="carousel">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <img src="image4.jpg" alt="image4">
</div>

2. 设置容器样式

然后，在 CSS 中为容器设置一定的高度和宽度，并将其内部的图片元素设为绝对定位。

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

3. 编写动画效果

下面，我们将编写旋转木马的核心动画部分。

（1）首先，我们需要定义一个 @keyframe 规则，用于指定旋转动画的每个阶段样式：

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

这段代码表示从 0 度开始旋转，到 -360 度结束旋转，形成一个完整的轮回。

（2）接着，我们为图片元素添加动画效果，并设置成轮播的样式：

.carousel img:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px);
  animation: rotate 12s linear infinite;
}
.carousel img:nth-child(2) {
  transform: rotateY(90deg) translateZ(300px);
  animation: rotate 12s linear 3s infinite;
}
.carousel img:nth-child(3) {
  transform: rotateY(180deg) translateZ(300px);
  animation: rotate 12s linear 6s infinite;
}
.carousel img:nth-child(4) {
  transform: rotateY(270deg) translateZ(300px);
  animation: rotate 12s linear 9s infinite;
}

这段代码表示第一张图片从 0 度开始旋转，并沿着 Z 轴正方向平移 300 像素，同时采用了 12 秒线性缓动的动画效果，并设置成循环播放。

第二张图片的角度为 90 度，开始时间为 3 秒，第三张图片的角度为 180 度，开始时间为 6 秒，第四张图片的角度为 270 度，开始时间为 9 秒。

4. 隐藏其它图片

最后，我们需要隐藏其它图片，只显示当前图片。这里我们可以使用 opacity 属性来实现。

.carousel img:nth-child(1),
.carousel img:nth-child(2),
.carousel img:nth-child(3),
.carousel img:nth-child(4) {
  opacity: 0;
}
.carousel img:nth-child(1):checked ~ img:nth-child(1),
.carousel img:nth-child(2):checked ~ img:nth-child(2),
.carousel img:nth-child(3):checked ~ img:nth-child(3),
.carousel img:nth-child(4):checked ~ img:nth-child(4) {
  opacity: 1;
}

这段代码表示在图片容器中选择第一张图片，然后选择后面的图片并隐藏。在当前图片被选中时，隐藏其它图片，显示当前图片。

完整代码

最终的 HTML 和 CSS 代码如下所示。

<div class="carousel">
  <input type="radio" id="rotate1" name="rotate" checked>
  <input type="radio" id="rotate2" name="rotate">
  <input type="radio" id="rotate3" name="rotate">
  <input type="radio" id="rotate4" name="rotate">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <img src="image4.jpg" alt="image4">
</div>

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}
.carousel img:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px);
  animation: rotate 12s linear infinite;
}
.carousel img:nth-child(2) {
  transform: rotateY(90deg) translateZ(300px);
  animation: rotate 12s linear 3s infinite;
}
.carousel img:nth-child(3) {
  transform: rotateY(180deg) translateZ(300px);
  animation: rotate 12s linear 6s infinite;
}
.carousel img:nth-child(4) {
  transform: rotateY(270deg) translateZ(300px);
  animation: rotate 12s linear 9s infinite;
}
.carousel img:nth-child(1),
.carousel img:nth-child(2),
.carousel img:nth-child(3),
.carousel img:nth-child(4) {
  opacity: 0;
}
.carousel img:nth-child(1):checked ~ img:nth-child(1),
.carousel img:nth-child(2):checked ~ img:nth-child(2),
.carousel img:nth-child(3):checked ~ img:nth-child(3),
.carousel img:nth-child(4):checked ~ img:nth-child(4) {
  opacity: 1;
}

总结

本文介绍了如何使用 CSS 制作旋转木马效果。通过 transform 和 @keyframe 规则的运用，我们创建了一个基本的旋转木马，并为图片添加了动画效果，使其能够自动切换图片。