CSS 动画 ： 3D翻页动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>create effect of 3D</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#my3d{
/* 加入hidden 避免对其他元素造成影响 */
overflow: hidden;
perspective: 800px;
perspective-origin: 50% 50%;
}
.page-group{
width: 400px;
height: 400px;
margin: 0 auto;
position: relative; /* 规定渲染 */
transform-style:preserve-3d;
}
.page{
width: 360px;
height: 360px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color:#fff;
font-size: 360px;
font-weight: bold;
position: absolute; transition: transform 1s linear;
}
.page1{
transform-origin: bottom;
}
.page2,.page3,.page4,.page5,.page6{
transform-origin: bottom;
transform: rotateX(90deg);
} #op,.think{
display: grid;
place-items: center;
} </style>
</head>
<body>
<div id="my3d">
<div class="page-group">
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
<div class="page page5">5</div>
<div class="page page6">6</div>
</div>
</div>
<div id="op">
<button onclick="next()">next</button>
<button onclick="previous()">previous</button>
</div> <br><br>
<hr>
<br><br> <div class="think">
<h4>思路</h4>
<br>
<p>page1一开始铺在屏幕上，其他的页面横向的铺在屏幕里面</p>
</div> <script>
let curIndex = 1;
function next(){
if(curIndex==6){
return
}
let curPage = document.querySelector(".page"+curIndex);
// 当前页面向前方 90°
curPage.style.webkitTransform = "rotateX(-90deg)"
curIndex++
// 下一个页面向前 90°
let nextPage = document.querySelector(".page"+curIndex)
nextPage.style.webkitTransform = "rotateX(0deg)" }
function previous(){
if(curIndex==1){
return
}
let curPage = document.querySelector(".page"+curIndex);
// 当前页面向前方 90°
curPage.style.webkitTransform = "rotateX(90deg)"
curIndex--
// 下一个页面向前 90°
let nextPage = document.querySelector(".page"+curIndex)
nextPage.style.webkitTransform = "rotateX(0deg)" }
</script> </body>
</html>
来自 ： https://www.bilibili.com/video/BV1ei4y137we?p=10
CSS 动画 ： 3D翻页动画的更多相关文章
- css3 --- 翻页动画 --- javascript --- 3d --- 准备
用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...
- css3 --- 翻页动画 --- javascript --- 3d --- Action
用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- flex布局构建大屏框架并支持翻页动画、滚动表格功能
本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...
- 简单3D翻页相册制作教程
3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...
- 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
- Activity切换动画(overridePendingTransition)-翻页效果
Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画.{它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时的动 ...
- CSS3、jQuery实现3D翻书动画
使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看 HTML <div class="desktop"> <div class=& ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
随机推荐
- 如何实现CesiumJS的视效升级？
CesiumJS作为一款强大的地理可视化引擎,为我们提供了丰富的地球数据可视化和交互展示的能力.然而,随着用户需求的不断增加和技术的不断进步,如何进一步提升CesiumJS的视觉效果成为了一个重要的问 ...
- 浅谈webview与js交互
浅谈下webview与js的交互,项目中因为需要获取页面中的许多属性,所以用到了这些,让后端在方法中传了过来. 下面的demo是本地的html代码,具体可以仿写,都差不多,注重思想. 1:项目目录 2 ...
- 解决 IDEA 报错ERROR:JAVA: 无效的源发行版: 11
解决 IDEA 报错ERROR:JAVA: 无效的源发行版: 11 原因 一般都是创建工程的时候 一路next 默认选择了 Java Version 11, 而本地的jdk版本是 8 解决 File ...
- 2023.3 Idea配置Tomcat环境
tomcat配置 下载tomcat 先到官网(按住Ctrl再左键点击直接打开官网)下载64位的tomcat,网速慢就用魔法下 创建项目.模块 打开idea(我用的是最新的idea的专业版,ui有点变化 ...
- 直击云栖|践行数据化运维，云掣重新解读MSP
2020年云栖大会百城汇·杭州站,云掣MSP专场圆满落幕! 本次云栖大会·云掣MSP专场以"数据智能,智能运维"为主题,主要聚焦企业云化转型演进趋势,云上运维全景监控以及云原生云环 ...
- Unix 文件权限位
简介 在 Unix 或者类 Unix 文件系统中,每个文件(或者目录,目录也被视为文件)都有自己的所属对象和一个与之相关的 Unix 用户组关联,可以通过设置对应的文件的权限标记指定对于所属用户.所属 ...
- 启动多个redis进程
启动时指定端口 启动时指定端口可在一台服务器启动多个redis进程 cd /opt/work/redis/bin./redis-server ../conf/redis.conf --port 638 ...
- html2pdf
nodejs 生成pdf比较靠谱,使用chrome核心渲染: puppeteer / phantom 爬虫都好用 good
- Karmada：让跨集群弹性伸缩FederatedHPA突破新边界
本文分享自华为云社区<Kubernetes多集群管理Karmada,跨集群弹性伸缩FederatedHPA突破新边界!>,作者:华为云云原生团队. 根据 Flexera 最新发布的< ...
- A/B 实验避坑指南：为什么不建议开 AABB 实验
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 本文将针对日常开设 A/B 实验过程中一个不太合理的使用方法--AABB 实验进行详细的解释,告诉大家为什么不建议 ...