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

为什么我这点击后没反应?求解答

<!DOCTYPE html>

<html>


<head>

<meta charset="{CHARSET}">

<title></title>

<style>

#my3d {

-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;

font-size: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

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);

}

#ap {

text-align: center;

margin: 40px auto;

}

</style>

<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)";

}

funtion prav() {

if(curIndex == 6) {

return;

}

var curPage = document.getElementById("page" + curIndex);

curPage.style.webkitTransform = "rotateX(90deg)";

curIndex--;

var pravPage = document.getElementById("page" + curIndex);

pravPage.style.webkitTransform = "rotateX(0deg)";

}

</script>

</head>


<body>

<div id="my3d">

<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 id="ap">

<a href="javascipt:next()">next</a>&nbsp;<a href="javascipt:prav()">pravious</a>

</div>

</div>

</body>


</html>


2018-03-18 源自:CSS3 3D 特效 3-2 714 浏览 2 回答

首先你代码那么多错误,难道没有看见?font-weight:bold;

还有最主要的是javascript单词都写错,你怎么可能点的出来吗?

我也是醉了,改过来在试下吧

2018-03-24
0

  demo地址->  http://hilij.com/demo/page3D.html

2018-08-12
0

举报

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