百行代码制作一个属于猫主子的3D场景照片墙#yyds干货盘点#

Posted 2022-01-19 前端老实人

你有猫么？  想不想给猫主子做个照片墙

结构代码

<div id="perspective">
        <!--wrap start-->
        <div id=wrap>
            <img src="images/1.jpg"    />
            <img src="images/2.jpg"    />
            <img src="images/3.jpg"    />
            <img src="images/4.jpg"    />
            <img src="images/5.jpg"    />
            <img src="images/6.jpg"    />
            <img src="images/7.jpg"    />
            <img src="images/8.jpg"    />
            <img src="images/9.jpg"    />
            <img src="images/10.jpg"    />
            <img src="images/11.jpg"    />
            <p></p>
        </div>
        <!--wrap end-->
    </div>

样式代码

* 
    margin: 0;
    padding: 0;


body 
    background: #222;
    overflow: hidden;


#perspective 
    perspective: 800px;


#wrap 
    width: 120px;
    /*133:200  4:6  */
    height: 180px;
    margin: 0 auto;
    position: relative;
    /*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);


#wrap img 
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: 0 0 8px #000000;
    transform: rotateY(0deg) translateZ(0px);
    /*倒影：朝向 偏移 遮盖*/
    /*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
    -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;


#wrap p 
    width: 1200px;
    height: 1200px;
    background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 124, 0.2), rgba(0, 0, 0, 0));
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 102%;
    margin-left: -600px;
    margin-top: -600px;
    transform: rotateX(90deg);

表现代码

window.onload = function() 
    var oWrap = document.getElementById(wrap);
    var oImg = oWrap.getElementsByTagName(img);
    var oImgLength = oImg.length;
    var Deg = 360 / oImgLength;
    var nowX, nowY, lastX, lastY, minusX = 0,
        minusY = 0;
    var roY = 0,
        roX = -10;
    var timer;
    for (var i = 0; i < oImgLength; i++) 
        oImg[i].style.transform = rotateY( + i * Deg + deg) translateZ(350px);
        oImg[i].style.transition = transform 1s  + (oImgLength - 1 - i) * 0.1 + s;

    
    mTop();
    window.onresize = mTop;

    function mTop() 
        var wH = document.documentElement.clientHeight;
        oWrap.style.marginTop = wH / 2 - 180 + px;
    
    // 拖拽：三个事件-按下 移动 抬起
    //按下
    document.onmousedown = function(ev) 
        ev = ev || window.event;
        //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
        lastX = ev.clientX;
        lastY = ev.clientY;
        //移动
        this.onmousemove = function(ev) 
                ev = ev || window.event;
                clearInterval(timer);
                nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
                nowY = ev.clientY; // clientY ………………………………顶部………………
                //当前坐标和前一点坐标差值
                minusX = nowX - lastX;
                minusY = nowY - lastY;
                //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
                roY += minusX * 0.2; // roY = roY + minusX*0.2;
                roX -= minusY * 0.1;
                oWrap.style.transform = rotateX( + roX + deg) rotateY( + roY + deg);
                //前一点的坐标
                lastX = nowX;
                lastY = nowY;
            
            //抬起
        this.onmouseup = function() 
            this.onmousemove = null;
            timer = setInterval(function() 
                minusX *= 0.95;
                minusY *= 0.95;
                roY += minusX * 0.2; // roY = roY + minusX*0.2;
                roX -= minusY * 0.1;
                oWrap.style.transform = rotateX( + roX + deg) rotateY( + roY + deg);
                if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1)  clearInterval(timer); 
            , 13);
        
        return false;
    

最后

如果对您有帮助，希望能给个