html实战一：3D切割轮播图_html切割轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41174502/article/details/105260204

本文分享了一个使用HTML、CSS和JavaScript实现的3D轮播图案例，详细介绍了如何通过transform属性创建3D效果，以及如何利用jQuery进行轮播控制。

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

很开心，也很激动，每天都看着自己进步一点点，嘿嘿~

附上视频链接：https://www.bilibili.com/video/BV1vZ4y1j7T5/

源码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="main">
        <ul>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
        <a href="#" class="left">&lt;</a>
        <a href="#" class="right">&gt;</a>
    </div>
    <audio src="He's a Pirate.mp3" controls autoplay></audio>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/index.js"></script>
    
</body>

</html>

css

/* 采坑记录：给span标签设置transform 效果的时候打开调试台发现
nth-child(2)、nth-child(4)的高度都为0以为是自己写错了，纠结了半天最后想明白了，
以正对屏幕的视角看去上面和下面都成了一条线所以没有高度。。*/
body,ul,li,div{
    padding: 0;
    margin: 0;
}
body{
    background-color: rgb(0,15,15);
}
li{
    list-style: none;
}
.main{
    width: 720px;
    height: 300px;
    margin: 200px auto 100px;
    position: relative;
}
ul{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    overflow: hidden;
 
}
a{
    text-decoration: none;
    color:rgb(193, 184, 184);
    font-size: 35px;
    position: absolute;
    top:50%;
    margin-top:-15px;
    display: none;
}
audio{
    margin-left: 600px;
    margin-bottom: 200px;
}
.right{
    right: 0;
}
li{
    width: 180px;
    height: 100%;
    float: left;
    position: relative;
    transform-style: preserve-3d;
    transition: all 2s;
}
ul>li>span{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: antiquewhite;

}
ul>li>span:nth-of-type(1){
    transform: translateZ(150px);
    background: url(../images/1.jpg);
}
ul>li>span:nth-child(2){
    transform: rotateX(90deg) translateZ(150px);
    background: url(../images/12.jpg);
}
ul>li>span:nth-of-type(3){
    transform:rotateX(180deg) translateZ(150px);
    background:url(../images/2.jpg);
}
ul>li>span:nth-of-type(4){
    transform:rotateX(270deg) translateZ(150px);
    background: url(../images/8.jpg);
} 
ul>li:nth-of-type(2)>span:nth-of-type(1){
    background-position: -180px 0;
}
ul>li:nth-of-type(3)>span:nth-of-type(1){
    background-position: -360px 0;
}
ul>li:nth-of-type(4)>span:nth-of-type(1){
    background-position: -540px 0;
}

ul>li:nth-of-type(2)>span:nth-of-type(2){
    background-position: -180px 0;
}
ul>li:nth-of-type(3)>span:nth-of-type(2){
    background-position: -360px 0;
}
ul>li:nth-of-type(4)>span:nth-of-type(2){
    background-position: -540px 0;
}

ul>li:nth-of-type(2)>span:nth-of-type(3){
    background-position: -180px 0;
}
ul>li:nth-of-type(3)>span:nth-of-type(3){
    background-position: -360px 0;
}
ul>li:nth-of-type(4)>span:nth-of-type(3){
    background-position: -540px 0;
}

ul>li:nth-of-type(2)>span:nth-of-type(4){
    background-position: -180px 0;
}
ul>li:nth-of-type(3)>span:nth-of-type(4){
    background-position: -360px 0;
}
ul>li:nth-of-type(4)>span:nth-of-type(4){
    background-position: -540px 0;
}

// 设置资源锁的目的：防止连续点击按钮时一张图还没放完，另一张图接着放就会出bug
$(function(){
    var index=0;
    //设置资源锁
    var flag=true;
    var time=setInterval(move,700);
    //默认轮播
    function move(){
        if(!flag)return;
        flag=false;
        index++;
        $(".main>ul>li").css("transform","rotateX("+(-90*index)+"deg").each(function(index,item){
            $(item).css("transition-delay",index*0.3+"s");
        });
    }
    //鼠标移入移出
    $(".main").mouseenter(function () { 
        clearInterval(time);
        $(".main>a").css("display","block")
    });
    $(".main").mouseleave(function () { 
        time=setInterval(move,700);
        $(".main>a").css("display","none")
    });

    //点击左边按钮：上一张
    $(".left").on('click',function(){
        if(!flag) return ;
        flag=false;
        index--;
        $(".main>ul>li").css("transform","rotateX("+(-90*index)+"deg").each(function(index,item){
            $(item).css("transition-delay",index*0.3+"s");
            });
    });

    //点击右边按钮：下一张
    $(".right").click(move);


    //一轮完成，资源释放，transitionend过渡完成时触发
    $("li:last").on("transitionend",function(){
        flag=true;
    })
})