1、先上图~~~
2、代码
html部分
<body>
<div id="my3d">
<div id="box">
<div id="li1" class="li">1</div>
<div id="li2" class="li">2</div>
<div id="li3" class="li">3</div>
<div id="li4" class="li">4</div>
<div id="li5" class="li">5</div>
<div id="li6" class="li">6</div>
</div>
</div>
<div class="btns">
<a href="javascript:prev();" id="prev">prev</a>
<a href="javascript:next()" id="next">next</a>
</div>
</body>
css部分
#my3d{
-webkit-perspective:;
-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)";
}