body { margin:0; padding-top:0; background-color:#F7F7F7; } ul { height:100%; margin:0; padding:0; list-style:none; } .cut { width:560px; height:300px; margin:100px auto; border:1px solid #CCC; position:relative; } li { position:absolute; top:0; width:112px; height:100%; transition:transform 1s; transform-style:preserve-3d; width:112px; height:300px; } .cut li div { width:100%; height:100%; position:absolute; top:0; left:0; } .cut li section { }.cut li div:nth-child(1) { transform:rotateX(0deg) translateZ(150px); background:url(http://www.jq22.com/img/cs/500x300-1.png) no-repeat; } .cut li div:nth-child(2) { transform:rotateX(-90deg) translateZ(150px); background:url(http://www.jq22.com/img/cs/500x300-2.png) no-repeat; } .cut li div:nth-child(3) { transform:rotateX(-180deg) translateZ(150px); background:url(http://www.jq22.com/img/cs/500x300-3.png) no-repeat; } .cut li div:nth-child(4) { transform:rotateX(-270deg) translateZ(150px); background:url(http://www.jq22.com/img/cs/500x300-4.png) no-repeat; } /*按钮*/ .prev,.next { 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 { right:0; }
更新时间:2020-05-08 08:44:22
由于本地所用图片与插件库大小不同,具体还需自己调整