div前后翻转效果代码实例

快乐打工仔发布于 3年前分类：实例代码

div前后翻转效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。

分享一段代码实例，它实现了点击按钮可以实现前后翻转切换效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#my3dspace{
  -webkit-perspective:800;
  -webkit-perspective-origin:50% 50%;
  overflow:hidden;
}
#pagegroup{
  width:400px;
  height:400px;
  margin:0 auto;
  -webkit-transform-style:preserve-3d;
  position: relative;
}
.page{
  width:400px;
  height:400px;
  background-color:black;
  font-weight:bold;
  position:absolute;
}
#page1 {
  -webkit-transform-origin: bottom;
  -webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
  -webkit-transform-origin:bottom;
  -webkit-transition:-webkit-transform 1s linear;
  -webkit-transform: rotateX(90deg);
}
#op{
  text-align:center;
  margin:40px auto;
}
#op >a{
  text-decoration: none;
}
.c1{background-color: #6cf}
.c2{background-color: #ff5f71}
.c3{background-color: #ccc}
.c4{background-color: #000}
.c5{background-color: #787878}
.c6{background-color: #555}
</style>
</head>
<body>
<div id="my3dspace">
  <div id="pagegroup">
    <div class="page c1" id="page1"></div>
    <div class="page c2" id="page2"></div>
    <div class="page c3" id="page3"></div>
    <div class="page c4" id="page4"></div>
    <div class="page c5" id="page5"></div>
    <div class="page c6" id="page6"></div>
  </div>
</div>
<div id="op">
  <a href="javascript:prev()">上一页</a>
  <a href="javascript:next()">下一页</a>
</div>
<script>
var curIndex = 1;
function next() {
  if (curIndex == 6) {
    return;
  }     
  var curPage = document.getElementById('page' + curIndex);
  curPage.style.webkitTransform = "rotateX(-90deg)";
 
  curIndex++;
  var nextPage = document.getElementById('page' + curIndex);
  nextPage.style.webkitTransform = "rotateX(0deg)";
}
 
function prev() {
  if (curIndex == 1) {
    return;
  }
 
  var curPage = document.getElementById("page" + curIndex);
  curPage.style.webkitTransform = "rotateX(90deg)";
 
  curIndex--;
  var prevPage = document.getElementById("page" + curIndex);
  prevPage.style.webkitTransform = "rotateX(0deg)";
}
</script>
</body>
</html>

上面的代码实现了我们的要求，更多内容可以参阅相关阅读。