时间:2021-07-01 10:21:17 帮助过:20人阅读
效果图:
图(1)初始图
图(2)翻页过程
图(3)翻页结果
代码如下:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>transition</title>
- <style>
- #container{ width:500px; height:500px; margin:20px auto; background:#ff0000;
- -webkit-transiton:background 2s linear,width 2s,height 2s;
- -moz-transition:background 2s,width 2s,height 2s;
- -o-transition:background 2s,width 2s,height 2s;
- -ms-transition:background 2s,width 2s,height 2s;
- transition:background 2s,width 2s,height 2s;
- }
- #container:hover{ background: #00ff00;width:200px;height: 200px;}
- #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-size: 360px;
- font-weight: blod;
- line-height: 360px;
- text-align: center;
- position: absolute;
- }
- #page1{
- -webkit-transform-origin:top;
- transform-origin:top;
- -webkit-transition:-webkit-transform 1s linear;
- transition:transform 1s linear;
- }
- #page2,#page3,#page4,#page5,#page6{
- -webkit-transform-origin:top;
- transform-origin:top;
- -webkit-transition:-webkit-transform 1s linear;
- transition:transform 1s linear;
- -webkit-transform:rotateX(-90deg);
- transform:rotateX(-90deg);
- }
- #op{
- text-align: center;
- margin: 40px auto;
- }
- </style>
- </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>
- <div id="op">
- <a href="javascript:next()" rel="external nofollow" >next</a>
- <a href="javascript:prev()" rel="external nofollow" >prev</a>
- </div>
- <script type="text/javascript">
- var curIndex = 1;
- function next(){
- if(curIndex==6)
- return;
- var curPage = document.getElementById("page"+curIndex);
- curPage.style.webkitTransform = "rotateX(90deg)";
- curPage.style.transform = "rotateX(90deg)";
- curIndex ++;
- var nextPage = document.getElementById("page"+curIndex);
- nextPage.style.webkitTransform="rotateX(0deg)";
- nextPage.style.transform="rotateX(0deg)";
- }
- function prev(){
- if(curIndex==1)
- return;
- var curPage =document.getElementById("page"+curIndex);
- curPage.style.webkitTransform="rotateX(-90deg)";
- curPage.style.transform="rotateX(-90deg)";
- curIndex --;
- var prevPage = document.getElementById("page"+curIndex);
- prevPage.style.webkitTransform="rotateX(0deg)";
- prevPage.style.transform="rotateX(0deg)";
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!