请麻烦帮忙看一下怎么回事
qq_慕九州7040881
2020-05-26 17:30
<!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> <a href="javascript:prev()">prev</a>
</div>
</body>
</html>
3回答
-
- 慕哥8262166
- 2021-10-02 12:00:03
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 -
- _大坏蛋_
- 2020-09-22 13:11:46
说错了，你的div开始全竖着呢
-
- _大坏蛋_
- 2020-09-22 13:01:38
你把1躺着了，2-6竖着呢！
CSS3 3D 特效
78574 学习 · 425 问题
相似问题