請(qǐng)問一下為什么我代碼跟老師的一模一樣，但是卻沒有效果呢
<!DOCTYPE html>
<html>
<head>
? ? <title>3D效果</title>
? ? <style>
? ? ? ? #my3Dspace{
? ? ? ? ? -webkit-perspective: 800;
? ? ? ? ? ? -webkit-perspective-origin: 50% 50%;
? ? ? ? ? ? ovetflow:hidden;
? ? ? ? }
? ? ? ? #pagegrounp{
? ? ? ? ? ?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-weight: 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);
? ? ? ? }
#op{
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="rotate(0deg)";
}
function prec(){
if(curIndex==1)return;
var curpage=document.getElementById("page"+curIndex);
curpage.style.webkitTransform="rotateX(90deg)";
curIndex--;
var precpage=document.getElementById("page"+curIndex);
precpage.style.webkitTransform="rotateX(0deg)";
}
</script>
</head>
<body>
<div id="my3Dspace">
? ? <div id="pagegrounp">
? ? ? ? <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:next()">next</a> <a href="javascript:prec()">previous</a>
</div>
</body>
</html>
2016-05-16
你可以檢查一下你的代碼，css中#my3Dspace中overflow拼錯(cuò)了，JS中一個(gè)你寫成了rotate，
2016-04-11
瀏覽器兼容的webkit改一下，-moz,-ms,-o，看你的瀏覽器是什么
2016-03-23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>翻頁效果</title>
<style type="text/css">
.wrap{width:400px;height: 400px;margin: 100px auto;
color: yellow;}
#pagegroup
{
position: relative;
width: 360px;
height: 360px;
margin: 20px auto;
-webkit-perspective:800;
-webkit-perspective-origin:center center;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin:left;
-webkit-transition:transform 1s linear;
}
.page{position: absolute;width: 360px;height: 360px;font:bold 360px/360px SimHei;text-align: center;vertical-align: middle;background-color:rgba(0,0,0,0.3);/* opacity: 0.3 */;
-webkit-transform-origin:left;
-webkit-transition:transform 1s linear;}
#page1{transform: rotateY(0deg);}
#page6,#page2,#page3,#page4,#page5{transform: rotateY(90deg);}
.lr-bt{margin: 50px auto;text-align: center;}
</style>
<script style="text/javascipt">
var curpage = 1;
function pre(){
if(curpage == 1)
return;
var nowpage = document.getElementById("page"+curpage);
nowpage.style.transform = "rotateY(90deg)";
curpage--;
var prepage = document.getElementById("page"+curpage);
prepage.style.transform = "rotateY(0deg)";
console.log("當(dāng)前是第"+curpage+"頁");
}
function next(){
if(curpage == 6)
return;
var nowpage ?=document.getElementById("page"+curpage);
nowpage.style.transform = "rotateY(-90deg)";
curpage++;
var nextpage = document.getElementById("page"+curpage);
nextpage.style.transform = "rotateY(0deg)";
console.log("當(dāng)前是第"+curpage+"頁");
}
</script>
</head>
<body>
<div>
<div id="pagegroup">
<div id="page1">1</div>
<div id="page2">2</div>
<div id="page3">3</div>
<div id="page4">4</div>
<div id="page5">5</div>
<div id="page6">6</div>
</div>
<div>
<a href="javascript:pre();">前一頁</a>   
<a href="javascript:next();">下一頁</a>
</div>
</div>
</body>
</html>
2016-03-23
position:relative;位置定位最好寫在css的第一個(gè)，那些都是有讀取順序的