1、先上图~~~
2、代码
html部分
1 <body> 2 <div id="my3d"> 3 <div id="box"> 4 <div id="li1" class="li">1</div> 5 <div id="li2" class="li">2</div> 6 <div id="li3" class="li">3</div> 7 <div id="li4" class="li">4</div> 8 <div id="li5" class="li">5</div> 9 <div id="li6" class="li">6</div> 10 </div> 11 </div> 12 <div class="btns"> 13 <a href="javascript:prev();" id="prev">prev</a> 14 <a href="javascript:next()" id="next">next</a> 15 </div> 16 </body>
css部分
#my3d{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; overflow: hidden; } #box{ width: 400px; height: 400px; margin: 0 auto; position: relative; -webkit-transform-style: preserve-3d; } .li{ width: 400px; height: 400px; line-height: 400px; text-align: center; font-size: 300px; color: #fff; background: #000; position: absolute; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg); -webkit-transition: -webkit-transform 1s linear; } .li:first-child{ -webkit-transform: rotateX(0deg); } .btns{ text-align: center; }
js部分
var index = 1; function prev(){ if (index==1) { return false; }; var cur = document.getElementById('li'+index); cur.style.webkitTransform="rotateX(90deg)"; index--; var prev = document.getElementById('li'+index); prev.style.webkitTransform="rotateX(0deg)"; } function next(){ if (index==6) { return false; }; var cur = document.getElementById('li'+index); cur.style.webkitTransform="rotateX(-90deg)"; index++; var next = document.getElementById('li'+index); next.style.webkitTransform="rotateX(0deg)"; }