                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

翻到-90的时候是这样的，老师给看看怎么回事

如题所述！

来到地球的第一天

2019-07-02

源自：CSS3 3D 特效 3-2

关注问题我要回答

936

操作

收起

2 回答

TA不在
2021-09-12

在<style></style>中，找到.page｛…｝这个位置，把里面的width和height都设置设置成400px。就可以解决这个问题。我就是这样解决的。

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

收起回答

___越努力越幸运
2019-08-23

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

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

这样就可以把翻转挡住按钮部分的隐藏起来，但是会有数字，所以要把除开当前的展示页透明度设置为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;  //  当前是第几页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;}