制作CSS3 3D旋转相册 (曲面)_css3实现3d相册旋转-优快云博客

本文链接：https://blog.youkuaiyun.com/C_D_X_C/article/details/134307208
本文介绍了如何使用HTML、CSS和JavaScript创建一个动态的网页，通过CSS3的3D变换和动画效果，实现多张图片的水平和垂直旋转，并配合鼠标拖动产生平滑的交互体验。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
做个记录，避免遗忘
<!DOCTYPE html >
<html lang="en" onselectstart="return false;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000;
        }
        .box{
            width:133px;
            height: 200px;
            margin: 100px auto;
            position:relative;
            /* border: 1px solid #fff; 测试用到*/
            transform-style:  preserve-3d;
            /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
            /*perspective:800px;*/
            /*3.设置透视距离*/
            transform:perspective(800px) rotateX(0deg) rotateY(0deg)  ;
        }
        .box div{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0px;
            /*border-radius: 3px;
            //box-shadow: 0px 0px 5px #fff;
            /*4.设置图片阴影*/
            /* -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
             /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
            /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
        }
    </style>
</head>
<body>
<div style="width: 647px;height: 386px;border: 1px solid #ff0000;line-height: 386px; ">
    <div  id="img1" class="box" style="position:relative;"></div>
 
</div>
 
<script>
    function setImg(id,src,width,height) {
        var parent=document.getElementById(id);
        parent.style.width=width+"px";
        parent.style.height=height+"px";
        parent.style.top='calc( 50% - '+height/2+'px)';
        parent.style.left="";
        for (var i=0 ;i<width;i++){
            var ele=document.createElement("div");
            var pos = -i + "px";
            /*
            * backgroundImage: "url(" + img + ")",
                    backgroundPosition: "0px " + pos,
                    height: "1px",
                    width: _w + "px",
                    position: "absolute",
                    top: i + "px"
            * */
            ele.style.backgroundImage="url("+src+")";
            ele.style.backgroundPosition=pos+" 0px";
            ele.style.height=height+"px";
            ele.style.width="1px";
            ele.style.position="absolute";
            ele.style.left=0 + "px";
            ele.style.backgroundSize=width+"px "+height+"px";
            parent.append(ele)
        }
    }
    var width=250;
    var height=150;
    setImg("img1","./img/1.jpg",width,height)
    setImg("img1","./img/2.jpg",width,height)
    setImg("img1","./img/3.jpg",width,height)
    setImg("img1","./img/4.jpg",width,height)
    setImg("img1","./img/5.jpg",width,height)
    setImg("img1","./img/6.jpg",width,height)
 
    window.onload=function (  ) {
 
 
        //1.获取元素
        var oWrap = document.getElementById('img1');
        var oImg = oWrap.children;
        // var oImgLen=oImg.length;
 
        //var deg = 360 / oImg.length;//3.每个需要旋转的度数
        var degP =360/6;
        var l= 1+(150/650);//w+w*(l/(s-l))1.231
        //l=nπr/180;
        var w=width;
        //l=w+w(150/650)=n*Math.PI*150/180
        var n=(w+w*(150/650))/(Math.PI*150/180)
        console.log(n);
        console.log(n/width);
        var degC=0.16;//Math.atan(l/150)/(Math.PI / 180);//0.888479771920148//0.4
 
        // 定义一个开始的度数
        var roX = -10;
        var roY = 0;
        var x, y, x_, y_, xN, yN, time = null;
        //2.遍历所有的img标签
        for(var i=0;i<6;i++){
 
            for (var j=0;j<width;j++){
                oImg[j+i*width].style.transform = 'rotateY(' + (i * degP+j*degC) + 'deg) translateZ(150px)';
               // oImg[j+i*width].style.transition = ' all 1s ' + (oImg.length - i - 1) * 0.1 + 's';
                //transition:设置过渡
                oImg[j+i*width].ondragstart = function () {
                    return false;
                }
 
            }
 
 
 
        }
 
 
       /* for (var i = 0; i < oImg.length; i++) {
            // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
            oImg[i].style.transform = 'rotateY(' + i * deg + 'deg) translateZ(350px)';
            oImg[i].style.transition = ' all 1s ' + (oImg.length - i - 1) * 0.1 + 's';
            //transition:设置过渡
            oImg[i].ondragstart = function () {
                return false;
            }
        }*/
 
        //3.事件处理
        document.onmousedown=function ( e ) {
            clearInterval(time);
            e=e||window.event;
            x_=e.clientX;
            y_=e.clientY;
            // console.log ( "鼠标按下了" )
            this.onmousemove=function ( e ) {
                e=e||window.event;
                //获取滚动的X和Y轴
                //client:鼠标触发点相对于页面可视区域左上角距离
                x=e.clientX;
                y=e.clientY;
                //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
                xN=x-x_;
                yN=y-y_;
                //差值拼接到旋转的Y里面去
                roY+=xN*0.2;//水平拖影响Y轴;
                roX-=yN*0.2;
                oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
                // var oDiv =document.createElement('div');
                // this.body.appendChild(oDiv);
                // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";这三行是测试用的
                x_=e.clientX;
                y_=e.clientY;
            }
            this.onmouseup=function (  ) {
                //  console.log ( "鼠标抬起了" )
                this.onmousemove= null;
                //设置一个定时器,实现后面惯性效果8
                time=setInterval(function (  ) {
 
                    //无限乘以零点95它会接近0的状态
                    xN*=0.95;
                    yN*=0.95;
                    //当它小到0.1时停止计时器
                    if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
                        clearInterval(time);
                    }
                    //差值拼接到旋转的Y里面去
                    roY+=xN*0.2;//水平拖影响Y轴;
                    roX-=yN*0.2;
                    oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
 
                },30)
            }
        }
    }
 
 
</script>
</body>
</html>