CSS3 switch effect of mobile phone end turn screen

The principle is based on the CSS3

1. Depth of field: perspective:100px;

2, center point: Transform-origin:center Center 0;

3, transform-style:preserve-3d the parent to make the transformation will preserve the effect to the subset above

Cube effects are implemented through node nesting:

<Divclass= "box">        <Divclass= "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; }

--------------above is the principle of implementation----------------------

Here is the effect of the implementation

functionsetlayout () {varList = ID ("Imglist"); varLi = List.getelementsbytagname ("li"); varLiH = (list.clientheight)/4;varstr = "";  for(vari=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(vari=0; i<li.length;i++){            varspan = Li[i].getelementsbytagname ("span");  for(varj=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";            }        }    }

The main point is to generate 16 Li on the page and then set the background-position of the span in the background to determine the location of each small lattice

CSS3 switch effect of mobile phone end turn screen