* { margin:0; padding:0; list-style:none; } #box { width:700px; height:400px; margin:20px auto; position:relative; perspective:800px; } #box span { position:absolute; background:url(http://www.jq22.com/img/cs/500x300-1.png) no-repeat; transform-style:preserve-3d; transition:1s all ease; transform-origin:top center; } #box span em { position:absolute; width:100%; height:100%; } #box span em.front { background:url(http://www.jq22.com/img/cs/500x300-1.png) no-repeat; transform:translateZ(0.1px); } #box span em.back { background:url(http://www.jq22.com/img/cs/500x300-2.png) no-repeat; transform:translateZ(-0.1px) scale(-1,1); }
3D颗粒状图片翻页