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

为什么chrome点击没有效果,用360极速有翻页,但没有3D效果呢???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>3D翻页特效</title>

<style>

*{

margin:0;

padding:0;

}


.3D{

perspective:800;

-webkit-perspective:800;

perspective-origin:50% 50%;

-webkit-perspective-origin:50% 50%;

overflow:hidden;/*为了不影响除了3D场景外其他元素的显示*/

}

.group{

width:200px;

height:200px;

margin:0 auto;

transform-style:preserve-3d;/*告诉浏览器group里面的page页面将按3D场景变换*/

-webkit-transform-style:-webkit-preserve-3d;

position:relative;/*为了使page重叠在一起*/

}

.page{

width:200px;

height:200px;

margin:50% auto;

font-size:200px;

line-height:200px;

text-align:center;

background:#366;

color:#FFF;

position:absolute;/*page重叠显示*/

}

#page0{

/*设置旋转轴*/

transform-origin:;

-webkit-transform-origin:bottom;

transition:transform 1s ease-out;/*设置transform过渡效果*/

-webkit-transition:-webkit-transform 1s ease-out;

}

div[id*='page']:not([id=page0]){

/*设置旋转轴*/

transform-origin:bottom;

-webkit-transform-origin:bottom;

/*设置transform过渡效果*/

transition:transform 1s ease-out;

-webkit-transition:-webkit-transform 1s ease-out;

transform:rotateX(90deg);

-webkit-transform:rotateX(90deg);

-moz-transform:rotateX(90deg);

}

#button{

text-align:center;

margin:100px auto;


}

</style>

<script type="text/javascript">

var current=0;

function previous(){

if(current==0){

return;

}

else{

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

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

current--;

var prePage=document.getElementById("page"+current);

prePage.style.transform="rotateX(0deg)";

}

}

function next(){

if(current==10){

return;

}

else{

/*通过拼写方式,获取当前页面*/

var curPage=document.getElementById('page'+current);

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

current++;

var nextPage=document.getElementById('page'+current);

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

}

}

</script>

</head>


<body>

<div class="3D" id="3D">

<div class="group" id="group">

<div class="page" id="page0">0</div>

<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 class="page" id="page7">7</div>

<div class="page" id="page8">8</div>

<div class="page" id="page9">9</div>

<div class="page" id="page10">10</div>

</div><div id="button">

<a href="javascript:previous()">pre</a>&nbsp;&nbsp;<a href="javascript:next()">next</a>

</div>

</div>



</body>

</html>


2018-08-17 源自:CSS3 3D 特效 3-2 430 浏览 1 回答

你的问题在于 两个链接点不到,被page0挡住了

2018-11-11
回复 0

举报

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