为了账号安全,请及时绑定邮箱和手机立即绑定

为什么这些代码在我的浏览器中都无法实现?????着急啊!!!

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

    <title>正方体</title>

</head>

<body>

    <div id="my3dspace">

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

</body>

</html>

css部分:

html, body, div, span,

        h1, h2, h3, h4, h5, h6, p

        a, img, ol, ul, li

        {

            margin:0;padding:0;border:0;outline:0;

        }

        #my3dspace{

        -webkit-perspective:2000;

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

margin-top:100px;

}

#pagegroup{

width:400px;

height:400px;

margin:0 auto;

-webkit-transform-style:preserve-3d;

position:relative;

-webkit-tranform-origin:center center;

-webkit-transition:transform 5s;

}

#pagegroup:hover{

-webkit-transform:rotate3d(0.5,0.5,0,360deg);

}

.page{

width:360px;

height:360px;

padding:18px;

border:1px solid #fff;

background-color:rgba(0,0,0,.5);

color:white;

font-weight:bold;

font-size:360px;

line-height:360px;

text-align:center;

position:absolute;

}

#page1{

-webkit-transform-origin:bottom;

}

#page2{

-webkit-transform-origin:right;

-webkit-transform:rotateY(-90deg);

}

#page3{

-webkit-transform-origin:bottom;

-webkit-transform:translateZ(-400px);

}

#page4{

-webkit-transform-origin:left;

-webkit-transform:rotateY(90deg);

}

#page5{

-webkit-transform-origin:top;

-webkit-transform:rotateX(-90deg);

}

#page6{

-webkit-transform-origin:bottom;

-webkit-transform:rotateX(90deg);

}

#op{

text-align:center;

margin:40px auto;

}


正在回答

1 回答

有用谷歌而且可能你谷歌版本太低了..

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

举报

0/150
提交
取消

为什么这些代码在我的浏览器中都无法实现?????着急啊!!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信