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

请麻烦帮忙看一下怎么回事

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.my3dspace{

-webkit-perspective: 800;

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

overflow: hidden;

}

.pagegroup{

width: 400px;

height: 400px;

margin: 0 auto;

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

position: relative;

}

.page{

width: 360px;

height: 360px;

padding: 20px;

background-color: black;

color: white;

font-weight: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

position: absolute;

}

#page1{

-webkit-transform-origin: bottom;

-webkit-transition: transform 1s linear;

}

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

-webkit-transform-origin: bottom;

-webkit-transition: transform 1s linear;

-webkit-transform: rotateX(90deg);

}

.op{

text-align: center;

margin: 40px auto;

}

</style>

<script type="text/javascript">

var curIndex =1;

function next(){

if(curIndex==6)

return;

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

curPage.style.transform="rotateX(-90deg)";

curIndex ++;

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

nextPage.style.transform="rotateX(0deg)";

}

function prev(){

if(curIndex==1)

return;

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

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

curIndex --;

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

nextPage.style.transform="rotateX(0deg)";

}

</script>

</head>

<body>

<div class="my3dspace">

<div class="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 class="op">

<a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">prev</a>

</div>

</body>

</html>


正在回答

3 回答

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

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

说错了,你的div开始全竖着呢

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

你把1躺着了,2-6竖着呢!



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

举报

0/150
提交
取消

请麻烦帮忙看一下怎么回事

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