各位大神帮看一看，为何我显示的是第6页，不是教程第一页，请说一说原因，我用的是qq浏览器-慕课网

各位大神帮看一看，为何我显示的是第6页，不是教程第一页，请说一说原因，我用的是qq浏览器

来源：3-1 创建3D动画效果结构部分

慕粉4042427

2016-12-26 16:54

<!DOCTYPE html>
<html>
<head>
    <title>cube - liuyubobobo</title>

    <style>

        #experiment{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;

           overflow:hidden
        }
        #cube{
            position: relative;
            margin:0px auto;
            height:400px;
            width:400px;
            -webkit-transform-style:preserve-3d;
        }
        .face{

            height:360px;
            width:360px;
            padding:20px;
            background-color: black;

            color:white;
            font-weight:bold;
            font-size:360px;
            line-height:360px;
            text-align:center;
            position:absolute;

        }
        #face1 {-webkit-transform-origin:bottem;
                 -webkit-transition:-webkit-transform is linear;
        }
        #face2 {-webkit-transform-origin:bottem;
                -webkit-transition:-webkit-transform is linear;
               -webkit-transform rotateX(90deg);

        }
        #face3 {
            -webkit-transform-origin:bottem;
                -webkit-transition:-webkit-transform is linear;
               -webkit-transform rotateX(90deg);
        }
        #face4 {
            -webkit-transform-origin:bottem;
                -webkit-transition:-webkit-transform is linear;
               -webkit-transform rotateX(90deg);

        }
        #face5 {
            -webkit-transform-origin:bottem;
                -webkit-transition:-webkit-transform is linear;
               -webkit-transform rotateX(90deg);

        }
        #face6 {
            -webkit-transform-origin:bottem;
                -webkit-transition:-webkit-transform is linear;
               -webkit-transform rotateX(90deg);
        }

        #op{
            text-align:center;margin:40px auto;
        }

    </style>

</head>
<body>
<body>

<div id="experiment">
    <div id="cube">
        <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
    </div>
</div>
<div id="op">
    <a href="javascript:next()">next</a>  <a href="javascript:prey()">preyvious</a>;

</div>
</body>
</html>

写回答关注

1回答

stone310

2016-12-29 11:20:37

已采纳

因为你的-webkit-transform：rotateX(90deg)这中间的冒号全部都漏了- -从#face2到#face6..

1 0

慕粉4042...

非常感谢！

2016-12-29 13:31:39

共 1 条回复 >

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78569 学习 · 436 问题

查看课程

相似问题

大神们，为什么我的代码一点一点写出来，在谷歌浏览器是这样的啊？？

回答 4

为什么我的第一张出来的效果是6呢

回答 2

各位大佬帮忙看看为啥

回答 2

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

回答 2

用的浏览器是什么

回答 1

打开慕课网App查看更多内容