body,div,ul,li,a,p { margin:0; padding:0; } #box { width:560px; height:300px; margin:50px; position:relative; } /*.prev,.next*/ a { display:block; width:60px; height:60px; text-align:center; line-height:60px; margin-top:-30px; font-size:40px; color:#FFF; text-decoration:none; background-color:rgba(0,0,0,0.5); position:absolute; top:50%; } /*.next*/ a:last-child { right:0; } ul { width:560px; height:300px; list-style:none; } li { width:112px; height:300px; float:left; position:relative; transition:all 1s; transform-style:preserve-3d; /*transform:rotateX(-30deg); */ /*perspective:1000px; */ } li span { position:absolute; left:0; top:0; width:100%; height:100%; display:inline-block; } li span:nth-child(1) { transform:translateZ(150px); background-image:url(http://www.jq22.com/img/cs/500x300-1.png); } li span:nth-child(2) { transform:rotateX(90deg) translateZ(150px); background-image:url(http://www.jq22.com/img/cs/500x300-2.png); } li span:nth-child(3) { transform:rotateX(180deg) translateZ(150px); background-image:url(http://www.jq22.com/img/cs/500x300-3.png); } li span:nth-child(4) { transform:rotateX(270deg) translateZ(150px); background-image:url(http://www.jq22.com/img/cs/500x300-4.png); } li:nth-child(2) span { background-position:-112px 0; } li:nth-child(3) span { background-position:-224px 0; } li:nth-child(4) span { background-position:-336px 0; } li:nth-child(5) span { background-position:-448px 0; }
依赖jquery,#box为包裹轮播图的盒子,宽高为图片宽高,li的宽度为每张照片的宽度除以li的个数,高度与照片高度相等
li下所有span的translateZ值是li高度的一半(正值)。