css3 手机端翻屏切换效果

Posted 2020-07-25 junwu

原理是基于css3的

1、景深:perspective:100px;

2、中心点:transform-origin:center center 0;

3、transform-style:preserve-3d  父级作变换会保留效果到子集上面

通过节点嵌套 实现立方体效果:

<div class="box">
        <div class="div">
            <div>
                <span>1</span>
                <div>
                    <span>2</span>
                    <div>
                        <span>3</span>
                        <div>
                            <span>4</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

　　 .box { width:100px;height:100px; padding:50px; margin:100px auto; perspective: 200px;}
    .box .div { position: relative; width:100px;height:100px; transform-origin:center center -50px; transform-style:preserve-3d; transition:3s; }
    .box .div div{ position:absolute; left:100px; top:0px; transform:rotateY(90deg); background:green; width:100px;height:100px;  transform-style:preserve-3d; transform-origin:left;}
    .box .div>div{ left:0px;transform:rotateY(0deg);}
    .box:hover .div { transform:rotateY(-360deg); }
    .div span{ color:white; display:block; color:white; text-align:center; line-height:100px; }

--------------以上是实现原理----------------------

下面是实现的效果

function setLayout(){
        var list = id("imgList");
        var li = list.getElementsByTagName("li");
        var liH = (list.clientHeight)/4;
        var str = "";
        for(var i=0;i<16;i++){
            str += ‘<li><div class="div"><div><span></span><div><span></span><div><span></span><div><span></span></div></div></div></div></div></li>‘;
        }
        list.innerhtml=str;
        id("css").innerHTML += "#imgList li{height:"+liH+"px}";
        for(var i=0; i<li.length;i++){
            var span = li[i].getElementsByTagName("span");
            for(var j=0; j<span.length;j++){
                span[j].style.backgroundImage = "url("+imgUrls[j]+")";
                span[j].style.backgroundPosition=-(i%4)*4+"rem -"+parseInt(i/4)*liH+"px";
            }
        }
    }

主要是在页面生成16个li然后通过背景设置span的background-position确定每个小格子的位置