发新贴  快速回复

我照着网上的代码写了一个3D图片,代码有点模糊,按照他的写法我的图片应该是可以转动的,但我转不动他,F12也没有检测到语法错误,很奇怪,有大神能帮我看下吗?谢谢。

  WEB小疯子
2017-09-13 17:38

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3D背景墙</title>
        <style type="text/css">
            body{
                margin:0 auto;
                padding: 0;
                background: black;
                overflow: hidden;
                
            }
            .perspective{
                perspective: 800px;
            }
            .wrap{
                transform-style: preserve-3d;
                width: 128px;
                height: 100px;
                margin: 100px auto;
                position: relative;
                transform: rotateX(-18deg) rotateY(8deg); 
            }
            .wrap img{
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                transform: rotateY(0deg) rotateZ(0px);
                padding: 10px;
                background: transparent;
                box-shadow: 0 0 4px white ; /*水平位移 垂直位移 扩散程度 颜色*/
                border-radius: 5px;
                -webkit-box-reflect:below 5px -webkit-line-gradient:(top, rgba(0,0,0,0) 48%, rgba(0,0,0,0.5) 100%) ;
                /*倒影 倒影模式 直径*/
            }
            .wrap p{
                width: 1200px;
                height: 1200px;
                background: -webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.5),rgba(0,0,0,0));
                position: absolute;
                border-radius:50% ;
                left: 50%;
                top: 100%;
                margin-left:-600px ;
                margin-top:-600px ;
                transform: rotateX(98deg); /*沿着X轴倒*/
            }
        </style>
    </head>
    <body>
        <div class="perspective">
            <div class="wrap">
                <img src="img/shu.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu1.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu2.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu3.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu4.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu5.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu6.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu7.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu8.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu9.jpg" width="133" height="200" alt="仓鼠"/>
                <img src="img/shu10.jpg" width="133" height="200" alt="仓鼠"/>
                <p></p>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function(){
                var oImg = document.querySelectorAll("img")
                var oWrap = document.querySelector(".wrap")
                var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;
                var timer=null
                var length=oImg.length;
                var Deg=360/length;
                for(var i=0; i<length;i++){
                    oImg[i].style.transform="rotateY("+ i*Deg +"deg) translateZ(350px)";
                    oImg[i].style.transform="transform is "+(length-1-i)*0.2+"s"
                }
                oTop();
                window.onresize=oTop;
                function oTop(){
                    var wH=document.documentElement.clientHeight ||document.body.clientHeight;
                    oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+"px";
                }
                document.onmousedown=function(event){
                    event=event||window.event;
                    lastX=event.clientX;
                    lastY=event.clientY;
                    clearInterval(timer);
                    document.onmousemove=function(event){
                        event=event||window.event;
                        nowX=event.clientX;
                        nowY=event.clientY;
                        minusX-nowX-lastX;
                        minusY-nowY-lastY;
                        roY+=minusX*0.2;
                        roX-=minusY*0.1;
                        oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"
                        lastX=nowX;
                        lastY=nowY;                        
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        timer=setInterval(function(){
                            minusX*=0.9;
                            minusY*=0.9;
                            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;
                }
                
            }
        </script>
    </body>
</html>
 

附件下载:
 
 
莫涛

96行 97行改成:  minusX=nowX-lastX;  minusY=nowY-lastY;

2017-09-15 16:59  回复本帖
 
WEB小疯子

莫涛 2017-09-15 16:59发表的内容:

96行 97行改成:  minusX=nowX-lastX;  minusY=nowY-lastY;

好的谢谢

登录 后才可以发表回复