CSS3 3D 特效_技术问答

roylawxi

为什么我的next和prev对1来说就没有3D翻页效果，其他的倒是正常。: #page1的"-webkit-transition: -w-transform 1s linear;"应该写成“-webkit-transition: -webkit-transform 1s linear;”; 2019-08-12 1回答·1142浏览

来到地球的第一天

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

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;}

2019-07-02 2回答·1027浏览

weixin_慕娘0158064

为什么我的不能3D翻页，求大神解救: next函数的判断是==6，不是==1，另外六个元素的position是absolute不是relative; 2019-05-04 1回答·1149浏览

qq_慕丝4153574

关于if函数位置

已采纳绝尘kinoko 的回答

1、准确的说是放在next函数内部其他代码的后面或中间；

2、因为js函数语句是逐行执行的，只有放最前面才会有边界判定的效果；中间不知道你放哪里，放后面就相当于先执行了3d变换操作，再去判断return，事实上你什么都不写函数默认也会return；

2019-04-13 1回答·1237浏览

慕娘2196853

为什么我的next点击的时候方向和老师的是反的呢？？: 应该是你的JS代码的问题; 2019-02-14 2回答·1387浏览

Bullyyyyy

为什么我实现不了3D翻转？？？: JS代码开头没有声明定义变量curIndex。; 2019-01-07 1回答·1255浏览

眨巴眨巴看谁

为什么chrome点击没有效果，用360极速有翻页，但没有3D效果呢？？？: 你的问题在于两个链接点不到，被page0挡住了; 2018-08-17 1回答·1599浏览

qq_醉卧_1

为什么我这点击后没反应？求解答: demo地址-> http://hilij.com/demo/page3D.html; 2018-03-18 2回答·1481浏览

緣来

perspective-origin: 已采纳 qq_绝版_0 的回答; <a> 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段.这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好; 2018-02-06 2回答·1431浏览

慕粉4088941

#page2,#page3,#page4{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; -webkit-transform:rotateX(120deg); }

字体颜色不是白色吧？

2017-12-29 1回答·1574浏览

慕移动2408492

3d翻页效果js代码相关问题: 设置这个就是为了取消原来旋转90°的状态; 2017-11-24 2回答·1264浏览

暖阳_

3d翻页切换效果，请问如何自动来回切换: 设置定时器; 2017-09-11 2回答·1221浏览

qq_琪琪_8

请问怎么没有3d的翻页效果？只是点击后简单地变页数，各位指教一下

已采纳泥沼的回答

你css写错了

#page2,#page3,#page4,#page5,#page6{

-webkit-transform-origin:bottom;

-webkit-transition:-webkit-transform is linear;

-webkit-transform:rotateX(90deg);

}

仔细看你的过度时间写成了i了

2017-07-21 2回答·1478浏览

慕丝8306798

为什么我点击往后的按钮之后定义div的那个值为什么和点击往前那个相同了，不是调用的全局的那个吗？: 你肯定赋值粘贴了发代码看看; 2017-06-01 1回答·1210浏览

慕粉3988711

关于rotate为什么是0度谁能来解释下？: rotate多少度并不是旋转了多少度，而是停留在多少度的位置，这样理解就容易多了; 2017-01-06 4回答·1984浏览

慕少5527016

求指教，为啥我做的没效果呀: 首先你的页面显示就有问题，style中num的样式是写给谁的呢，显然你是要给每一个页面的，那么就要写给每个页面的class; 2016-11-25 2回答·870浏览

铭天更精彩

这个能用纯css3 实现吗如果能有人能提供代码吗

var curIndex = 1 ;

function prev() {

if(curIndex == 1) return;

var curPage = document.getElementById("page" + curIndex);

curPage.style.webkitTransform = "rotateX(90deg)";

curIndex--;

var prevPage = document.getElementById("page" + curIndex);

prevPage.style.webkitTransform = "rotateX(0deg)";

}

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 = "rotateX(0deg)";

}

2016-11-12 2回答·987浏览

qq_美丽的曲线_03762593

求源代码呀，怎么敲都

已采纳 Yinsion_Nie 的回答

当然，你也可以使用我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3 创建翻页效果</title>
    <style type="text/css">
        .wrap {
            -webkit-perspective: 800;
            -webkit-perspective-origin: center;
            overflow: hidden;
        }
        
        .wrapContent {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
        }
        
        .pages {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 400px;
            font-weight: bold;
            line-height: 400px;
            text-align: center;
            color: #fff;
            background-color: #69e;
            -webkit-transform-origin: bottom;
            -webkit-transform: rotateX(90deg);
            -webkit-transition: -webkit-transform 1s linear;
        }
        
        .page1 {
            -webkit-transform: rotateX(0deg);
        }
        
        .controller {
            margin: 10px auto;
            text-align: center;
        }
        
        .controller span {
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            margin-right: 10px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div class="pages page1">1</div>
            <div class="pages page2">2</div>
            <div class="pages page3">3</div>
            <div class="pages page4">4</div>
            <div class="pages page5">5</div>
            <div class="pages page6">6</div>
        </div>
    </div>
    <div>
        <span id="next" onclick="next();">next</span>
        <span id="previous" onclick="previous();">previous</span>
    </div>
    
    <script type="text/javascript">
        var curIndex =1;
        function next() {
            if(curIndex == 6) {
                return;
            }else {
                var curPage = document.getElementsByClassName("page" + curIndex);
                curPage[0].style.webkitTransform = 'rotateX(-90deg)';
                curIndex ++;
                var nextPage = document.getElementsByClassName("page" + curIndex);
                nextPage[0].style.webkitTransform = 'rotateX(0deg)';
            }
        }
        
        function previous() {
            if(curIndex == 1) {
                return;
            }else {
                var curPage = document.getElementsByClassName("page" + curIndex);
                curPage[0].style.webkitTransform = 'rotateX(90deg)';
                curIndex --;
                var nextPage = document.getElementsByClassName('page' + curIndex);
                nextPage[0].style.webkitTransform = 'rotateX(0deg)';
            }
        }    
    </script>
</body>
</html>

2016-11-09 4回答·1634浏览

慕粉3116392

Uncaught TypeError: Cannot read property 'style' of null怎么处理这个问题？: 运行了你的代码，没有报错啊？我习惯将js代码放到body下面，可以保证dom全部加载完在执行js代码; 2016-10-28 2回答·1515浏览

我不是昵称

实现不出来3D效果: 2016-10-28 2回答·1091浏览

cjm07

nextpage.style.webkitTransform="rotateX(0deg): 重置了curPage2的属性，原来沿X轴旋转的角度属性被改为不旋转了，也就是0deg，rotate是相对元素初始位置而言的; 2016-10-18 1回答·964浏览

zxjiao

CSS3 3D效果

已采纳慕粉3800451 的回答

var index=document.getElementById("p"+index);

变量定义重复了，换个名字，比如 var p =

2016-08-19 1回答·1589浏览

关耳木南

黑块是从中间折的，这怎么解决

对的，就是下面这一段代码没有写。

-webkit-transform-origin:bottom;

这段代码要写在具有变换效果的元素的CSS中。

2016-07-26 2回答·918浏览

爱从零开始0

Uncaught TypeError: Cannot read property 'style' of null怎么解决啊，着急！！坐等！！: 你看一下你有没有设置padding，让padding值加上数字font-size的大小刚好等于pagegroup的width; 2016-07-19 5回答·1630浏览

qq_希望天空总是蓝色_03467485

js不翻转

这是我自己的，你可以看看

var curIndex=1;

function next(){

if(curIndex==6)

{

return;

}

else

{

var nextPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(-90deg)";

curIndex++;

var curPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(0deg)";

}

function prev(){

if(curIndex==1)

{

return;

}

var prevPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(90deg)";

curIndex--;

var curPage=document.getElementById("page"+curIndex).style.webkitTransform="rotateX(0deg)";

}

2016-07-08 2回答·890浏览

qq_希望天空总是蓝色_03467485

3d中js内容: 定义curIndex时，初始化curIndex=1没有？; 2016-07-07 1回答·879浏览

小花先森

第6个方块透视出来了: 视频上-webkit-transform-style:preserve-3d;改成这个-webkit-transform-style:preserve-3d;就可以了; 2016-07-07 6回答·2039浏览

慕粉3561184

想知道循环怎么实现？

已采纳 android感染的回答

我改了一下但效果不是太满意

function next() {

if (curIndex == 6) {

var curPage = document.getElementById("page"+curIndex);

curPage.style.webkitTransform = "rotateX(-180deg)";

curIndex =1;

var nextPage = document.getElementById("page"+curIndex);

nextPage.style.webkitTransform = "rotateX(-360deg)";

return;

}

var curPage = document.getElementById("page"+curIndex);

curPage.style.webkitTransform = "rotateX(-180deg)";

curIndex++;

var nextPage = document.getElementById("page"+curIndex);

nextPage.style.webkitTransform = "rotateX(-360deg)";

}

2016-06-26 2回答·1338浏览

繁星鸢尾

做了一个在Chrome上可以运行的版本~: 这个版本可以在chrome上运行~第一遍怎么都不对，后来认真的敲了第二遍才成功，真的需要很细心的去做。大家加油！; 2016-06-20 1回答·775浏览

慕的地3472395

overflow的作用？: 已采纳超的逗逗的回答; 谢谢同学的提醒，我本来就是溢出的，结果添加了该属性后就没有溢出了，我就在那里郁闷了半天，怎么没像老师那个效果了，结果才是没这个属性。本来按照3D的效果，已经翻看过的page会展现出一点点，可是如果用了overflow，就会将展现出的那点点遮掉，这样就不会看见已经翻看过的页码了。; 2016-05-14 1回答·1278浏览