用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来

zhezhongyun 2025-08-03 09:27 2 浏览

兄弟们，今天咱来搞点好玩的 —— 用 CSS 整一个 3D 轮播图！咱野生程序员就是要在代码里找乐子，技术和快乐咱都得要！代码是写不完的，但咱能自己敲出快乐来，走起！

一、先整个容器，搭个舞台

咋先写一个基本的html结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用 CSS 整活！3D 轮播图手把手教学，快乐代码敲出来</title>
</head>
<body>
    
</body>
</html>

然后咧整个大盒子，作为 3D 轮播图的容器。这就好比给轮播图搭个舞台，让图片们在里面尽情表演，图片呢可以尽情选择自己喜欢的。咱给这个容器加点透视效果，让它有 3D 那味儿。代码搞起来：

<div class="carousel-container">
        <div class="carousel">
            <div class="slide"><img src="assets/img/img1_1.png" alt="Slide 1"></div>
            <div class="slide"><img src="assets/img/img1_2.png" alt="Slide 2"></div>
            <div class="slide"><img src="assets/img/img1_3.png" alt="Slide 3"></div>
            <div class="slide"><img src="assets/img/img2_1.png" alt="Slide 4"></div>
            <div class="slide"><img src="assets/img/img2_2.png" alt="Slide 5"></div>
        </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #222;
}

.carousel-container {
  width: 425px;
  height: 766px;
  perspective: 6000px;
}

二、处理每个轮播项，让它们动起来

每个轮播项就是舞台上的演员，咱得让它们在 3D 空间里排好队。这里咱用transform-style: preserve-3d让它们保持 3D 空间关系，然后给它们分配不同的角度，让它们围绕中心排成一个圆，这样旋转的时候就有 3D 轮播的效果啦。

.carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 25s infinite linear;
}

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

  to {
    transform: rotateY(360deg);
  }
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Positioning each slide */
.slide:nth-child(1) {
  transform: rotateY(0deg) translateZ(400px);
}

.slide:nth-child(2) {
  transform: rotateY(72deg) translateZ(400px);
}

.slide:nth-child(3) {
  transform: rotateY(144deg) translateZ(400px);
}

.slide:nth-child(4) {
  transform: rotateY(216deg) translateZ(400px);
}

.slide:nth-child(5) {
  transform: rotateY(288deg) translateZ(400px);
}

三、用 hover 实现交互，鼠标放上去暂停动画

咱野生程序员就喜欢用简单的方法实现效果，不用 JavaScript，就用 CSS 和 hover 来搞交互。

.carousel:hover {
  animation-play-state: paused;
}

四、完整代码

这一套组合下来，代码还不到100行，咋就实现了一个3D轮播图效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用 CSS 整活！3D 轮播图手把手教学，快乐代码敲出来</title>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #222;
        }

        .carousel-container {
            width: 425px;
            height: 766px;
            perspective: 6000px;
        }

        .carousel {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 25s infinite linear;
        }

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

            to {
                transform: rotateY(360deg);
            }
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.5s;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        /* Positioning each slide */
        .slide:nth-child(1) {
            transform: rotateY(0deg) translateZ(400px);
        }

        .slide:nth-child(2) {
            transform: rotateY(72deg) translateZ(400px);
        }

        .slide:nth-child(3) {
            transform: rotateY(144deg) translateZ(400px);
        }

        .slide:nth-child(4) {
            transform: rotateY(216deg) translateZ(400px);
        }

        .slide:nth-child(5) {
            transform: rotateY(288deg) translateZ(400px);
        }

        .carousel:hover {
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div class="carousel-container">
        <div class="carousel">
            <div class="slide"><img src="assets/img/img1_1.png" alt="Slide 1"></div>
            <div class="slide"><img src="assets/img/img1_2.png" alt="Slide 2"></div>
            <div class="slide"><img src="assets/img/img1_3.png" alt="Slide 3"></div>
            <div class="slide"><img src="assets/img/img2_1.png" alt="Slide 4"></div>
            <div class="slide"><img src="assets/img/img2_2.png" alt="Slide 5"></div>
        </div>
    </div>
</body>
</html>

最后来看看咋们搞出来的效果。

五、最终效果，快乐拉满

现在，一个 3D 轮播图就搞出来啦！整个轮播图会像一个 3D 转盘一样转动，超有感觉！

咱在写代码的时候，可能会遇到各种问题，比如 3D 效果不明显，旋转角度不对，这时候别慌，打开浏览器的开发者工具，慢慢调，慢慢试，反正咱有的是时间（不是）。程序员的快乐就是在不断调试中找到正确的代码，看着自己写的效果跑起来，那成就感，杠杠的！

兄弟们，赶紧把代码复制到自己的编辑器里，跑起来看看效果，然后自己改改图片，调调参数，搞出自己喜欢的 3D 轮播图。记住，代码是死的，人是活的，咱要在代码里找到属于自己的快乐，让技术和快乐一起飞！

最后，提醒一下，别忘了把图片路径换成自己的图片哦，不然可看不到效果哈。好了，今天的整活就到这里，咱们下次再见，继续用代码快乐起来！

transform-style 属性

上一篇：实现一个超酷的 3D 立体卡片效 #前端开发
下一篇：php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒

用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来

一、先整个容器，搭个舞台

二、处理每个轮播项，让它们动起来

三、用 hover 实现交互，鼠标放上去暂停动画

四、完整代码

五、最终效果，快乐拉满

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?