为了账号安全,请及时绑定邮箱和手机立即绑定
关注
IT小辣鸡

翻页效果小项目,贴上自己做的代码!

HTML部分:

<!DOCTYPE html>    

<html lang="en">    

<head>    

<meta charset="UTF-8">    

<title>翻页效果</title>    

<link rel="stylesheet" type="text/css" href="CSS/demo.css">    

<script type="text/javascript" src="JS/demo.js"></script>    

</body>    

<div id="my3dspace">    

<div id="pagegroup">    

<div class="page" id="page1">1</div>    

<div class="page" id="page2">2</div>    

<div class="page" id="page3">3</div>    

<div class="page" id="page4">4</div>    

<div class="page" id="page5">5</div>    

<div class="page" id="page6">6</div>    

</div>    

</div>    

<div id="op"><a href="javascript:prev()">上一页</a>&nbsp;&nbsp;&nbsp;<a href="javascript:next()">下一页</a></div>    

</html>    

CSS部分:

#my3dspace{-webkit-perspective:800px;-webkit-perspective-origin:50% 50%;overflow: hidden;}


#pagegroup{width: 400px;height: 400px;margin:0px auto;-webkit-transform-style:preserve-3d;position: relative;}


.page{width: 360px;height: 360px;padding:20px;background: black;color: white;position: absolute;font-weight: bold;font-size: 360px;line-height: 360px;text-align: center;}


#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;font-size: 20px;}


#op a{text-decoration: none;}


#op a:hover{color: red;text-decoration: underline;}


JavaScript部分:

var curIndex=1;


  function next(){

    if(curIndex==6)

{

return;

}

else

{

var nextPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(-90deg)";

curIndex++;

var curPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(0deg)";

}

}

function prev(){

if(curIndex==1)

{

return;

}

    var prevPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(90deg)";

curIndex--;

var curPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(0deg)";

}


2016-08-11 源自:CSS3 3D 特效 605 浏览 0 回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信