为什么chrome点击没有效果，用360极速有翻页，但没有3D效果呢？？？
眨巴眨巴看谁
2018-08-17 17:56
<!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> <a href="javascript:next()">next</a>
</div>
</div>
</body>
</html>
1回答
-
- Amumu
- 2018-11-11 04:53:21
你的问题在于 两个链接点不到，被page0挡住了
CSS3 3D 特效
78572 学习 · 425 问题
相似问题