div前後翻轉效果程式碼例項

admin發表於2018-05-25

分享一段程式碼例項，它實現了點選按鈕可以實現前後翻轉切換效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.perspective參閱CSS3 perspective一章節。

（2）.perspective-origin參閱CSS3 perspective-origin一章節。

（3）.transform-style參閱CSS3 transform-style一章節。

（4）.transform-origin參閱CSS3 transform-origin一章節。

（5）.transition參閱CSS3 transition一章節。

（6）.transform參閱CSS3 transform屬性一章節。

相關文章