                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

翻到-90的時(shí)候是這樣的，老師給看看怎么回事

如題所述！

來到地球的第一天

2019-07-02

源自：CSS3 3D 特效 3-2

關(guān)注問題我要回答

1051

操作

收起

2 回答

TA不在
2021-09-12

在<style></style>中，找到.page｛…｝這個(gè)位置，把里面的width和height都設(shè)置設(shè)置成400px。就可以解決這個(gè)問題。我就是這樣解決的。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

___越努力越幸運(yùn)
2019-08-23

CSS部分： .#pagegroup添加overflow:hidden; .page添加opacity:0; #page1添加 opacity: 1。

JS部分：next()函數(shù)添加 curPage.style.opacity = "0",nextPage.style.opacity = "1" prev()函數(shù)同理。

這樣就可以把翻轉(zhuǎn)擋住按鈕部分的隱藏起來，但是會(huì)有數(shù)字，所以要把除開當(dāng)前的展示頁透明度設(shè)置為0.

完整代碼

<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><meta?http-equiv="X-UA-Compatible"?content="ie=edge"><title>CSS-3D特效</title><link?rel="stylesheet"?href="./css/index.css"></head><body><div?id="my3dexpace"><div?id="pagegroup"><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="ap"><button?id="prev">prev</button><button?id="next">next</button></div></body><script?src="./js/index.js"></script></html>

*{margin:?0;padding:?0;}#my3dexpace{perspective:?1000;-moz-perspective:?1000;-ms-perspective:?1000;-webkit-perspective:?1000;perspective-origin:?50%?50%;-moz-perspective-origin:?50%?50%;-ms-perspective-origin:?50%?50%;-webkit-perspective-origin:?50%?50%;}#pagegroup{width:?400px;height:?400px;margin:?0?auto;position:?relative;transform-style:?preserve-3d;-webkit-transform-style:?preserve-3d;overflow:?hidden;}.page{width:?360px;height:?360px;padding:?20px;background-color:?#000000;color:?#ffffff;font-weight:?bold;font-size:?360px;line-height:?360px;text-align:?center;position:?absolute;opacity:?0;}#page1{opacity:?1;}#page1,#page2,#page3,#page4,#page5,#page6{transform-origin:?bottom;-moz-transform-origin:?bottom;-o-transform-origin:?bottom;-webkit-transform-origin:?bottom;-moz-transform-origin:?bottom;-ms-transform-origin:?bottom;transition:?all?1s?linear;-moz-transition:?all?1s?linear;-o-transition:?all?1s?linear;-webkit-transition:?all?1s?linear;}#page2,#page3,#page4,#page5,#page6{transform:?rotateX(90deg);-moz-transform:?rotateX(90deg);-webkit-transform:?rotateX(90deg);-o-transform:?rotateX(90deg);-ms-transform:?rotateX(90deg);}#ap{width:?200px;height:?100px;margin:?0?auto;display:?flex;display:?-webkit-flex;justify-content:?space-around;align-items:?center;}#prev,#next{width:?50px;height:?30px;border-radius:?5px;overflow:?hidden;outline:?none;border:?none;background-color:?#000000;color:?#ffffff;cursor:?pointer;text-align:?center;line-height:?30px;font-size:?18px;font-weight:?bold;}

var?pageIndex?=?1;??//??當(dāng)前是第幾頁function?next()?{if(pageIndex?==?6)?{return;}var?curPage?=?document.getElementById("page"+pageIndex);curPage.style.webkitTransform?=?"rotateX(-90deg)";curPage.style.transform?=?"rotateX(-90deg)";curPage.style.opacity?=?"0";pageIndex?++;var?nextPage?=?document.getElementById("page"+pageIndex);nextPage.style.webkitTransform?=?"rotateX(0deg)";nextPage.style.transform?=?"rotateX(0deg)";nextPage.style.opacity?=?"1";}function?prev()?{if(pageIndex?==?1)?{return;}var?curPage?=?document.getElementById("page"+pageIndex);curPage.style.webkitTransform?=?"rotateX(90deg)";curPage.style.transform?=?"rotateX(90deg)";curPage.style.opacity?=?"0";pageIndex?--;var?prevPage?=?document.getElementById("page"+pageIndex);prevPage.style.webkitTransform?=?"rotateX(0deg)";prevPage.style.transform?=?"rotateX(0deg)";prevPage.style.opacity?=?"1";}document.getElementById("next").onclick?=?function()?{next();return;}document.getElementById("prev").onclick?=?function()?{prev();return;}