* { margin:0; padding:0; list-style:none; } #box { width:700px; height:400px; margin:100px auto; background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat; position:relative; perspective:1200px; } #box .page { position:absolute; width:50%; height:100%; right:0; top:0; transform-style:preserve-3d; z-index:2; transform-origin:left center; transition:1s all ease; } #box .page span { position:absolute; width:100%; height:100%; left:0; top:0; } #box .page span.front { background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat right top; transform:translateZ(0.1px); } #box .page span.back { background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat left top; transform:translateZ(-0.1px) scale(-1,1); } #box .page2 { position:absolute; width:50%; height:100%; right:0; top:0; background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat right top; z-index:1; }
图片翻页效果,使用与相册制作