亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

繞Y軸旋轉翻頁效果有問題

為什么改成繞Y軸旋轉,翻頁的時候第一頁卡在那里?不是已經繞Y軸轉了90度,應該看不到才對啊.....麻煩大神看下代碼。

http://img1.sycdn.imooc.com//56caac2e00011de006640475.jpg

<!DOCTYPE?html>
?<html>
?<head>
??<meta?charset="UTF-8">
??<title>3D?Calendar</title>
??<style>
?????#my3dspace{
??????-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;
??????color:white;
??????background-color:?black;
?????????font-weight:bold;
????????font-size:360px;
????????line-height:360px;
????????text-align:center;

???????position:absolute;
?????}
?????
??????
?????#page1{
???????-webkit-transform-origin:left;
???????-webkit-transition:-webkit-transform?1s?linear;
?????}
?????#page2,#page3,#page4,#page5,#page6,#page7{
???
?????????-webkit-transform-origin:left;
????????????-webkit-transition:-webkit-transform?1s?linear;
????????????-webkit-transform:rotateY(90deg);
?????}


?????.operation{
??????text-align:center;
??????margin:40px?auto;
?????}
??</style>

??<script?type="text/javascript">

??var?curIndex=1;

??function?next(){
????if(curIndex==7)
?????return;
??????var?curPage=document.getElementById("page"+curIndex);
??????curPage.style.webkitTransform="rotateY(-90deg)";
??????

??????curIndex++;
??????var?nextPage=document.getElementById("page"+curIndex);
??????nextPage.style.webkitTransform="rotateY(0deg)";
??}
?
??function?previous(){
??if(curIndex==1)
??return;
??var?curPage=document.getElementById("page"+curIndex);
??????curPage.style.webkitTransform="rotateY(90deg)";
??????
??????curIndex--;
??????var?nextPage=document.getElementById("page"+curIndex);
??????nextPage.style.webkitTransform="rotateY(0deg)";

??}

??</script>

?</head>
?<body>
??<div?id="my3dspace">
??<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?id="page7">7</div>
??</div>
??</div>

??<div>
??<a?href="javascript:previous()">previous</a>?<a?href="javascript:next()">next</a>
??</div>
?</body>
?</html>


正在回答

1 回答

我自己試了一下,把next函數里面對當前頁翻轉的角度改成向外76度(原來是90)左右就不會顯示翻過去的那一頁,請問這是為什么?

function?next(){
?	??if(curIndex==7)
?	??	return;
??????var?curPage=document.getElementById("page"+curIndex);
??????curPage.style.webkitTransform="rotateY(-76deg)";


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
CSS3 3D 特效
  • 參與學習       78569    人
  • 解答問題       436    個

使用CSS3當中的屬性,創建真實可用的三維效果

進入課程

繞Y軸旋轉翻頁效果有問題

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號