<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";

            }

        }

    }