首页 > 代码库 > 3d照片环效果

3d照片环效果

2024-08-17 02:39:20   220人阅读

 今天用用前两天总结的css3新效果写了一个3d照片环的效果，其中还有些bug大家可以看一看，一起改进。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style:none;
        }
        body{
            background:#000;
        }
        #box{
            width:133px;
            height:200px;
            position:absolute;
            top:40%;
            left:50%;
            color:red;
            margin:-100px 0 0 -67px;
            transform-style:preserve-3d;
            transform:perspective(800px) rotateX(-20deg);
        }
        #box li{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            border-radius:10px;
            background:url(‘images/img2/1.jpg‘) no-repeat;
            transition:1s all ease;
            -webkit-box-shadow:0 0 5px #fff;
            -webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
            transform:rotateY(0deg) translateZ(0px);
        }
    </style>
    <script>

        window.onload=function(){
            var oUl=document.getElementById(‘box‘);
            var N=11;

            for(var i=0;i<N;i++){
                var oLi=document.createElement(‘li‘);
                oLi.style.backgroundImage=‘url(images/img2/‘+(i+1)+‘.jpg)‘;
                oUl.appendChild(oLi);

                (function(oLi,i){
                    setTimeout(function(){
                        oLi.style.transition=‘1s all ease ‘+(200*(N-i))+‘ms‘;
                        oLi.style.transform=‘rotateY(‘+(360/N*i)+‘deg) translateZ(300px)‘;
                    },0);
                })(oLi,i);
            }
            var aLi=oUl.children;
            var y=0;
            aLi[0].addEventListener(‘transitionend‘,function(){
                document.onkeydown=function(ev){
                    if(ev.keyCode==37){
                        y-=360/N;
                        keyChange();
                    }else if(ev.keyCode==39){
                        y+=360/N;
                        keyChange();
                    }
                };
            },false);

            aLi[0].addEventListener(‘transitionend‘,function(){
                document.onmousedown=function(ev){
                    var disX=ev.clientX-y;
                    document.onmousemove=function(ev){
                        y=ev.clientX-disX;
                        for(var i=0;i<aLi.length;i++){
                            keyChange();
                        }
                    };
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    };
                    return false;
                };
            },false);

            function keyChange(){
                for(var i=0;i<aLi.length;i++){
                    aLi[i].style.transition=‘1s all ease‘;
                    aLi[i].style.transform=‘rotateY(‘+(360/N*i+y)+‘deg) translateZ(300px)‘;
                    var scale=Math.abs((Math.abs(360/N*i+y)-180)/180);
                    //aLi[i].innerHTML=scale;
                    //console.log(scale);
                    aLi[i].style.opacity=scale;
                }
            }
        };
    </script>
</head>
<body>
    <ul id="box">

    </ul>
</body>
</html>

　　

3d照片环效果


联系
我们