為什么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{
/*設(shè)置旋轉(zhuǎn)軸*/
transform-origin:;
-webkit-transform-origin:bottom;
transition:transform 1s ease-out;/*設(shè)置transform過渡效果*/
-webkit-transition:-webkit-transform 1s ease-out;
}
div[id*='page']:not([id=page0]){
/*設(shè)置旋轉(zhuǎn)軸*/
transform-origin:bottom;
-webkit-transform-origin:bottom;
/*設(shè)置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{
/*通過拼寫方式，獲取當(dāng)前頁面*/
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> <a href="javascript:next()">next</a>
</div>
</div>
</body>
</html>
2018-11-11
你的問題在于 兩個鏈接點不到，被page0擋住了