原生js与css3实现简单翻页动画

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{transform-style: preserve-3d;position: relative;}.page{width: 300px;height: 550px;border: 1px solid aquamarine;text-align: center;line-height: 550px;font-size: 16px;transition: 0.6s;transform-origin: left;transform: rotateY(0deg);position: absolute;top: calc(50vh - 260px);left: calc(50vw - 150px);/* background-color: coral; */}</style></head><body><div class="page">page1</div><div class="page">page2</div><div class="page">page3</div><div class="page">page4</div><div class="page">page5</div><script type="text/javascript">var pages =document.getElementsByClassName('page')var zIndexList=[]var zIndexList2=[]var index=1for (let page of pages){zIndexList.push(index)index++page.addEventListener('click',function(){var isfy=falsereturn (e)=>{page.style.zIndex=zIndexList[0] //设置zindex翻页得时候 按顺序翻页console.log(page.style.zIndex)zIndexList.splice(0,1)if(zIndexList.length==0){zIndexList=[...zIndexList2]                               }if(isfy){page.style.transform='rotateY(0deg)'isfy=false}else{page.style.transform='rotateY(180deg)'isfy=true}}}())}zIndexList2=[...zIndexList]</script></body>
</html>

通过给父级设置transform-style: preserve-3d; 开启父级内部的3d动画
通过给每一项page元素设置transform-origin: left; 使其动画以左侧为原点，我们这里使用transform: rotateY(0deg);控制page页面以左侧为原点按y轴旋转

原生js与css3实现简单翻页动画相关推荐

表格设置翻页 html,使用原生JS实现表格数据的翻页功能
使用原生JS实现如下图所示表格数据的翻页功能: HTML代码: 表格标题 < > 简单处理一下样式,CSS代码: #pagination { text-align: center; } # ...
html 上下翻页效果代码,原生js实现可以带上下翻页的翻页功能（代码）
本篇文章给大家带来的内容是关于原生js实现可以带上下翻页的翻页功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 翻页功能在渲染数据时经常用到,下面是使用原生JS去实现的一个 ...
6个超炫酷的HTML5电子书翻页动画【转】
6个超炫酷的HTML5电子书翻页动画 WebGL 演示网址:http://bookcase.chromeexperiments.com 相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏 ...
css 右上角翻开动画_6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
纯CSS3书本打开翻页js特效
下载地址纯CSS3书本打开翻页特效是一款基于css3 keyframes属性制作的设置多张背景图片组合成打开的书本自动翻页效果. dd:
css3实现书本翻页效果
css3翻页效果关键要点: 1.css3 3d动画的掌握 2.如何解决翻转后页面内容的改变 3.如何保持书本一直处于居中位置代码总览 <!DOCTYPE html> <html ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
html实现ppt效果页面,CSS3+JavaScript实现翻页幻灯片效果
先上效果图 *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position ...
swiper-页面的翻页动画--渐变效果
这次内容我们介绍在swiper页面的翻页动画--渐变效果既然有翻页,那么肯定少不了翻页效果,这个功能在swiper当中也给我们进行了包装,所以我们在使用的时候变得非常的方便. 首先进行基本的布局以及 ...

原生js与css3实现简单翻页动画

原生js与css3实现简单翻页动画相关推荐

最新文章

热门文章