还在苦苦寻找3D旋转模板？不是收费下载就是没有完整代码？这里有超完整的代码让你体验3D旋转的乐趣！-优快云博客

本文链接：https://blog.youkuaiyun.com/Crate_miracle/article/details/120448070

本文分享了一种使用HTML和CSS实现3D图片旋转特效的方法，通过设置不同的旋转角度和深度，让多个图片呈现出立体旋转的效果，并且在鼠标悬停时停止旋转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从我看到3D旋转特效开始，我就非常想找一找相关内容学习一下，但是苦于很难理解，我就想来找一找相关的代码体验一下也可以。找了半天才发现大部分都是需要付费或者积分下载的资源，少部分提供了代码但是代码不全。

经过我的不懈努力，我也是终于写出了旋转效果，现在毫不吝啬的把源码分享给大家，也希望大家毫不吝啬的把赞留下。

这是html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转</title>
	<link rel="stylesheet" type="text/css" href="xuanzhuan.css"/>
</head>
<body>
	<audio src="这里可以添加背景音乐" autoplay="autoplay" loop="loop"></audio>
    <section>
        <div><img src="图片一" ></div>
        <div><img src="图片二" ></div>
        <div><img src="图片三" ></div>
        <div><img src="图片四" ></div>
        <div><img src="图片五" ></div>
        <div><img src="图片六" ></div>
    </section>
</body>
</html>

这是css代码：

body {
            perspective: 800px;
			background-image: 这里放背景图;
			background-repeat: no-repeat;
			background-size: 100%;
        }
        section {
            position: relative;
            width: 261px;
            height: 180px;
            margin: 200px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        section div {
            width: 120px;
            height: 180px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
        }
        section div:nth-child(1) {
            transform: translateZ(300px);
        }
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
        audio{
            border: none;  
        }
		img{
			width: 100%;
			height: 100%;
		}
		section:hover{
			animation-play-state:paused;
		}
		img:hover{
			cursor: pointer;
			transform: scale(1.5);
			transition: all 1s;
		}