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

为什么我的next和prev对1来说就没有3D翻页效果,其他的倒是正常。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<div id="my3dspance">

<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()">previous</a>

<a href="javascript:next()">next</a>

</div>

</body>

<script type="text/javascript">

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>

<style>

#my3dspance{

-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: 360px;

height: 360px;

padding: 20px;

background-color: black;

color: white;

text-align: center;

font-size: 360px;

line-height: 360px;

font-weight: bold;

position: absolute;

}

#page1{

-webkit-transform-origin: bottom;

-webkit-transition: -w-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;

}

</style>

</html>


2019-08-12 源自:CSS3 3D 特效 3-2 66 浏览 0 回答

举报

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