transition是动画过渡效果，这句的意义应该是，让transform动画具有过渡效果。

可能是你没注意

可以试试动态修改值，比如修改旋转角度，输入框直接输入90度，然后用js去修改。

https://api.jquery.com/?s=%E6%B0%94%E5%AD%94%E5%BC%8F%E6%8A%A2%E7%AE%A1%2C%E6%8A%A2%E7%AE%A1%E8%86%9B%E7%BA%BF%E3%80%906499-533l.q%E3%80%91Nqm
https://api.jquery.com/?s=%E9%94%A1%E9%94%8Bb8%E5%B8%A6%E8%86%9B%E7%BA%BF%E5%90%97%E3%80%906499-533l.q%E3%80%91Ft7
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E6%9D%BF%E7%90%83%E9%AA%9A%E6%9C%AC%E3%80%906499-533l.q%E3%80%91KiY
https://api.jquery.com/?s=%E6%AD%A3%E5%93%81%E5%BE%B7%E7%93%A6%E7%9A%84%E7%B2%BE%E5%BA%A6%E3%80%906499-533l.q%E3%80%91Kc8
https://api.jquery.com/?s=m1911%E6%8A%A2%E5%A4%9A%E9%92%B1%E4%B8%80%E6%8A%8Am1911%E6%B0%94%E7%9A%84%E5%A4%9A%E5%B0%91%E3%80%906499-533l.q%E3%80%91qgG
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E5%86%85%E8%84%8F%E9%85%8D%E4%BB%B6%E6%B8%85%E5%8D%95%E3%80%906499-533l.q%E3%80%91Kcj
https://api.jquery.com/?s=%E6%B0%94%E5%8A%A81911%E5%A8%81%E5%8A%9B%E6%9C%89%E5%A4%9A%E5%A4%A71911%E5%A8%81%E5%8A%9B%E5%A6%82%E4%BD%95%E3%80%906499-533l.q%E3%80%91T43
https://api.jquery.com/?s=%E6%B0%94%E6%8E%92%E4%B8%80%E8%88%AC%E8%83%BD%E6%89%93%E5%A4%9A%E5%B0%91%E7%B1%B3%E3%80%906499-533l.q%E3%80%91i49
https://api.jquery.com/?s=%E6%8D%B7%E5%85%8B%E6%9D%BF%E7%90%83%E6%B0%94%E5%AE%A4%E5%92%8C%E9%98%80%E5%AE%89%E8%A3%85%E3%80%906499-533l.q%E3%80%91idr
https://api.jquery.com/?s=%E4%B8%AD%E6%8F%A150%E6%89%B3%E6%9C%BA%E5%9B%BE%E7%89%87%E3%80%906499-533l.q%E3%80%91wHY
https://api.jquery.com/?s=%E4%BA%94%E9%87%91%E5%BA%97%E4%B9%B0%E6%81%92%E5%8E%8B%E9%98%80%E5%90%97%E3%80%906499-533l.q%E3%80%91e5H
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E4%B8%80%E8%88%AC%E7%9E%84%E5%A4%9A%E5%B0%91%E7%B1%B3%E7%B2%BE%E5%BA%A6%E3%80%906499-533l.q%E3%80%91Od3
https://api.jquery.com/?s=%E6%9D%BF%E7%90%83%E5%88%9D%E9%80%9F240%E5%8F%AF%E4%BB%A5%E5%90%97%3F%E3%80%906499-533l.q%E3%80%91U6e
https://api.jquery.com/?s=%E7%89%9B%E5%A4%B4701%E6%8A%A2%E3%80%906499-533l.q%E3%80%91Ub8
https://api.jquery.com/?s=1.4%E5%85%8B%E5%BC%B9%E5%A4%9A%E5%B0%91%E5%88%9D%E9%80%9F%E5%90%88%E9%80%82%E3%80%906499-533l.q%E3%80%91f5k
https://api.jquery.com/?s=%E7%A7%83%E9%B9%B0%E7%9A%84%E5%8F%91%E5%B0%84%E5%8E%9F%E7%90%86%E5%9B%BE%E3%80%906499-533l.q%E3%80%91c0h
https://api.jquery.com/?s=%E4%B8%80%E5%A5%97%E7%A7%83%E9%9C%80%E8%A6%81%E5%A4%9A%E5%B0%91%E9%92%B1%E3%80%906499-533l.q%E3%80%91B8N
https://api.jquery.com/?s=m1911%E6%8A%A2%E5%A4%9A%E5%B0%91%E9%92%B1%E4%B8%80%E6%8A%8A%E3%80%906499-533l.q%E3%80%91ZQ4
https://api.jquery.com/?s=50%E5%BA%A7%E5%AD%90%E5%8E%9F%E7%90%86%E5%8A%A8%E6%80%81%E5%9B%BE%E3%80%906499-533l.q%E3%80%91Rql
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E7%AE%A1%E5%AD%90%E5%A4%9A%E9%95%BF%E3%80%906499-533l.q%E3%80%91WBq
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E7%8B%97%E5%8F%8B%E7%BE%A4%E3%80%906499-533l.q%E3%80%91A3D
https://api.jquery.com/?s=%E6%80%8E%E4%B9%88%E8%BE%A8%E5%88%AB%E7%9C%9F%E5%81%87%E5%BE%B7%E7%93%A6%E7%AE%A1%E3%80%906499-533l.q%E3%80%91sx2
https://api.jquery.com/?s=%E7%A7%83%E9%B9%B0%E6%B6%88%E5%A3%B0%E5%99%A8%E3%80%906499-533l.q%E3%80%91LNw
https://api.jquery.com/?s=%E7%A7%83%E9%B9%B0%E7%BB%84%E6%88%90%E9%83%A8%E5%88%86%E3%80%906499-533l.q%E3%80%91tt1
https://api.jquery.com/?s=%E5%B7%A5%E5%AD%97%E7%89%8CB3-1%E6%89%93%E9%B8%9F%E4%B8%93%E7%94%A8%E5%B7%A5%E5%85%B7%E6%8A%A2%3F%E3%80%906499-533l.q%E3%80%91sOc
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E8%BA%AB%E5%AD%90%E7%BB%93%E6%9E%84%E5%9B%BE%E7%BA%B8%E3%80%906499-533l.q%E3%80%91jsh
https://api.jquery.com/?s=%E7%A7%83%E9%B9%B0%E6%9C%BA%E6%9E%84%E5%9B%BE%E8%A7%A3%E3%80%906499-533l.q%E3%80%91gRK
https://api.jquery.com/?s=pcp%E6%89%93%E9%87%8E%E7%8C%AA%E7%9E%84%E5%93%AA%E9%87%8C%E3%80%906499-533l.q%E3%80%91B9k
https://api.jquery.com/?s=b50%E5%92%8C%E7%A7%83%E9%B9%B0%E9%82%A3%E4%B8%AA%E5%A8%81%E5%8A%9B%E5%A4%A7%E3%80%906499-533l.q%E3%80%91jB9
https://api.jquery.com/?s=m1911%E6%89%8B%E6%8B%89%E6%94%B9%E7%8C%9B%E5%B0%86%E3%80%906499-533l.q%E3%80%91cGP
https://api.jquery.com/?s=%E7%BE%8E%E7%89%88%E6%88%98%E6%9C%AF%E6%9D%BF%E7%90%83%3F%3F%E3%80%906499-533l.q%E3%80%91QtJ
https://api.jquery.com/?s=%E6%9D%BF%E7%90%83%E6%81%92%E5%8E%8B%E4%B8%8D%E7%A8%B3%E5%AE%9A%E6%80%8E%E4%B9%88%E5%8A%9E%E3%80%906499-533l.q%E3%80%91iBY
https://api.jquery.com/?s=pcp%E9%98%80%E5%9B%BE%E7%BA%B8%E3%80%906499-533l.q%E3%80%91Mc2
https://api.jquery.com/?s=%E5%9B%BD%E4%BA%A7%E7%9F%AD%E7%A7%83%E4%B8%80%E8%88%AC%E5%A4%9A%E5%B0%91%E9%92%B1%2C%3F%E3%80%906499-533l.q%E3%80%91DUV
https://api.jquery.com/?s=%E6%B0%94%E6%8E%922.5%E5%8E%8B%E8%83%BD%E6%89%93%E9%BA%BB%E9%9B%80%E5%90%97%3F%E3%80%906499-533l.q%E3%80%91RA4
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E6%80%8E%E4%B9%88%E4%B8%8A%E5%AD%90%E5%BC%B9%E3%80%906499-533l.q%E3%80%91lop
https://api.jquery.com/?s=%E5%9B%BD%E4%BA%A7%E7%9F%AD%E7%A7%83%E4%B8%80%E8%88%AC%E5%A4%9A%E5%B0%91%E9%92%B1%2C%E3%80%906499-533l.q%E3%80%91Hve
https://api.jquery.com/?s=%E6%8A%A2%E6%94%AF64%E5%BC%8F%E6%89%8B%E6%8A%A2%3F%3F%E3%80%906499-533l.q%E3%80%91mhs
https://api.jquery.com/?s=%E7%BE%8E%E7%A7%83%E8%A6%81%E5%A4%9A%E5%B0%91%E9%92%B1%E4%B8%80%E6%8A%8A%E3%80%906499-533l.q%E3%80%91FnV
https://api.jquery.com/?s=%E6%9D%BF%E7%90%83%E4%B8%80%E4%BD%93%E9%95%9C%E6%A1%A5%E5%9B%BE%E7%BA%B8%E3%80%906499-533l.q%E3%80%91nWU
https://api.jquery.com/?s=6.35%E5%AD%90%E5%BC%B9%E5%A4%9A%E5%A4%A7%E6%81%92%E5%8E%8B%3F%E3%80%906499-533l.q%E3%80%91vWA
https://api.jquery.com/?s=7.62%E9%93%85%E5%BC%B9%3F%E3%80%906499-533l.q%E3%80%91V0B
https://api.jquery.com/?s=2018%E7%A7%83%E5%AD%90%E9%85%8D%E4%BB%B6%E3%80%906499-533l.q%E3%80%91wNW
https://api.jquery.com/?s=6cm%E9%92%A2%E7%8F%A0%E7%94%A8%E5%87%A0%E4%B8%AA%E5%8E%8B%E4%B8%8D%E9%A3%98%E3%80%906499-533l.q%E3%80%91Dww
https://api.jquery.com/?s=%E9%92%A2%E7%8F%A0%E6%B0%94%E6%8E%92%E7%BB%84%E8%A3%85%E5%8E%9F%E7%90%86%E3%80%906499-533l.q%E3%80%91RB0
https://api.jquery.com/?s=bb%E6%8A%A2%E6%89%B3%E6%9C%BA%E7%BB%84%E6%8A%A2%2C%E5%8F%AF%E5%8F%91%E5%B0%84%E9%92%A2%E7%8F%A0%E3%80%906499-533l.q%E3%80%91Vub

箭头动态流动什么样

#page1的"-webkit-transition: -w-transform 1s linear;"应该写成“-webkit-transition: -webkit-transform 1s linear;”

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

next函数的判断是==6，不是==1，另外六个元素的position是absolute不是relative

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

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

火狐浏览器直接写perspective: 800px;就可以了，其余的都一样

视角点的问题，就像你看一个东西，注视点在物体的中心位置，它向前平放你依然能看到，改成这样就可以了

-webkit-perspective-origin: 50% 0%;

应该是你的JS代码的问题

JS代码开头没有声明定义变量curIndex。

margin: 100px auto; 你的margin后面跟的是分号

你的问题在于 两个链接点不到，被page0挡住了

修改图片中所述错误........

    不好意思说错了perspective-origin: 50% 50%; 没问题
有问题的是#page1～6里面的perspective-origin应该是transform-origin

  demo地址->  http://hilij.com/demo/page3D.html

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

-webkit-transform: rotate(90deg);

-webkit-transform:rotateX(90deg);

字体颜色不是白色吧？

不好意思，已经找到了。抱歉啦

是因为position: absolute;

设置这个就是为了取消原来旋转90°的状态

设置定时器

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>正方体</title>

</head>

<body>

    <div class='out-box'>

        <div class="inner-box">

            <span class="front common">前</span>

            <span class="left common">左</span>

            <span class="right common">右</span>

            <span class="behind common">后</span>

            <span class="top common">上</span>

            <span class="bottom common">下</span>

        </div>

    </div>

    <style>

        body,html{

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

            background-color: antiquewhite;

        }

        .out-box {

            width: 100%;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            perspective: 5000px;

            backface-visibility: hidden;

        }

        .inner-box {

            width: 300px;

            height: 300px;

            position: relative;

            transform-style: preserve-3d;

            transform: translatez(-150px) rotateX(30deg) rotateY(30deg) ;

        }

        .front {

            background-color: salmon;

            transform:translatez(150px);

        }

        .behind {

            transform:translatez(-150px);

            background-color: aqua;

        }

        .right {

            background-color: chartreuse;

            transform:rotateY(90deg) translatez(150px) ;

        }

        .left {

            background-color: pink;

            transform:rotateY(-90deg) translatez(150px) ;

        }

        .top {

            background-color: darkcyan;

            transform: rotateX(90deg) translateZ(150px);

        }

        .bottom {

            background-color: coral;

            transform: rotateX(90deg) translateZ(-150px);

        }

        .inner-box:hover  {

            transform: translatez(-150px) rotateX(135deg) rotateY(45deg) ;

            transition: all 3s;

        }

        .common {

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

            display: block;

            text-align: center;

            font-size: 35px;

            font-weight: bold;

            color: #fff;

            width: 300px;

            height: 300px;

            line-height: 300px;

        }

    </style>

</body>

</html>

可以的