Css3 3D螺旋轮播

最新推荐文章于 2025-06-17 17:40:43 发布

置顶赛文

最新推荐文章于 2025-06-17 17:40:43 发布

阅读量749

点赞数

CC 4.0 BY-SA版权

分类专栏： html5/Css3

本文链接：https://blog.youkuaiyun.com/qq_39493777/article/details/78028088

html5/Css3 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用CSS3的3D转换特性实现一个3D螺旋轮播效果。通过设置容器和元素的样式，以及JavaScript来处理点击事件，动态改变轮播角度，实现了平滑的3D轮播动画。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D螺旋轮播</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*设定容器的大小*/
        .slider{
            margin: 150px auto;
            width: 600px;
            height: 300px;
            position: relative;/*绝对定位*/
        }
        .slider-outer{
            width: 100%;
            height: 100%;
            position: relative;/*绝对定位*/
            transform-style: preserve-3d;
            transform: rotateY(30deg) rotateX(30deg);
        }
        .slider-item{
            position: absolute;/*相对定位*/
            width: 100px;
            height: 100%;
            transform-style: preserve-3d;
            -webkit-transition: 2s;
            -moz-transition: 2s;
            -ms-transition: 2s;
            -o-transition: 2s;
            transition: 2s;
        }
        .img{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .img:nth-child(1){
            background-image: url("images/1-1.jpg");
            transform:  rotateX(0deg) translateZ(150px);
        }
        .img:nth-child(2){
            background-image: url("images/1-2.jpg");
            transform:  rotateX(90deg)translateZ(150px);
        }
        .img:nth-child(3){
            background-image: url("images/1-3.jpg");
            transform:  rotateX(180deg)translateZ(150px);
        }
        .img:nth-child(4){
            background-image: url("images/1-4.jpg");
            transform:  rotateX(270deg)translateZ(150px);
        }
        .btns{
            position: absolute;
            top: 125px;
            width: 100%;
            height: 50px;
        }
        .prev,.next{
            width: 50px;
            height: 50px;
            position: absolute;
            background: rgba(0,0,0,0.3);
            font-size: 30px;
            color: #ffffff;
            text-align: center;
            line-height: 50px;
        }
        .prev{
            left: 0;
        }
        .next{
            right:0;
        }
    </style>
</head>
<body>
<!--外部容器-->
<div class="slider">
    <!--轮播图-->
    <div class="slider-outer">
        <!--item 单独的一个轮播图-->
        <div class="slider-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="slider-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="slider-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="slider-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="slider-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="slider-item">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>
    </div>
    <!--切换的按钮-->
    <div class="btns">
        <div id="prev" class="prev">&lt;</div>
        <div id="next" class="next">&gt;</div>
    </div>
</div>
<script>


    var num=0;
    var items=document.getElementsByClassName("slider-item");
    for(var i=0;i<items.length;i++){
        var item=items[i];
        item.style["left"]=item.offsetWidth*i+"px";
        item.style["transitionDelay"]=i*.3+"s";
        var sub=item.children;
        for(var j=0;j<sub.length;j++){
            sub[j].style["backgroundPosition"]=-item.offsetWidth*i+"px";
        }
    }
    document.getElementById("prev").onclick=function (e) {
        var rotate=++num*90;
        for(var i=0;i<items.length;i++){
            items[i].style["transform"]="rotateX("+rotate+"deg)"
        }
    };
    document.getElementById("next").onclick=function (e) {
        var rotate=--num*90;
        for(var i=0;i<items.length;i++){
            items[i].style["transform"]="rotateX("+rotate+"deg)"
        }
    };




</script>
</body>
</html>