JavaScript中transform实现数字翻页效果_网络技术_宿州市腾雀网络科技有限公司

JavaScript中transform实现数字翻页效果

发布时间 - 2026-01-11 00:04:02 点击率：次

效果图：

图（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>&nbsp;
 <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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js数字翻页效果 # javascript # 翻页效果 # 数字翻页效果 # jsp实现上一页下一页翻页功能(示例代码) # JavaScript实现翻页功能(附效果图) # 基于Vuejs框架实现翻页组件 # 移动端翻页插件dropload.js（支持Zepto和jQuery） # Js实现网页键盘控制翻页的方法 # js实现翻页后保持checkbox选中状态的实现方法 # 一个JS翻页效果 # javascript移动端电子书翻页效果实现代码 # 翻页 # transiton # webkit # linear # hover # ms # moz # margin # height # background # auto # overflow # origin # pagegroup # hidden # perspective # my3dspace # px # xhtml # brush

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：在VPS上无限建站时，如何优化SEO提高网站排名？

下一篇：AI驱动保险代理：最佳保险 lead generation

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：在VPS上无限建站时，如何优化SEO提高网站排名？

下一篇：AI驱动保险代理：最佳保险 lead generation