<!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> &nbsp;&nbsp;

      <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翻页动画的更多相关文章

  1. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

  2. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  3. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  4. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  5. 简单3D翻页相册制作教程

    3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...

  6. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  7. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  8. Activity切换动画(overridePendingTransition)-翻页效果

    Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画.{它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时的动 ...

  9. CSS3、jQuery实现3D翻书动画

    使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看 HTML <div class="desktop"> <div class=& ...

  10. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

随机推荐

  1. MinIO客户端之ls

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc ls 列出本地硬盘上的文件,命令如下: ./mc ls 控制台的输出,如下: [2023-12-14 23: ...

  2. 微信现金红包开发 PHP

    第一次在cnblogs发文章 微信商家后台-现金红包开发 sdk <?php class wxPay { //配置参数信息 const SHANGHUHAO = "1430998xxx ...

  3. 云MSP技本功|redis的5种对象与8种数据结构之字符串对象（下）

    简介: 引言 本文是对<redis设计与实现(第二版)>中数据结构与对象相关内容的整理与说明.本篇文章只对对象结构,1种对象--字符串对象.以及字符串对象所对应的两种编码--raw和emb ...

  4. 质效提升 ｜ 聊聊QA与业务测试

    上面一篇文章<质效提升 | QA不做业务需求测试,你怎么看>主要讨论的是QA 和业务需求测试相关的问题,文章发出后收到了很多小伙伴的反馈,这里把很多有意义的反馈放在下面,希望对你有用. 约 ...

  5. TooKit助力开发者上云

    本文分享自华为云社区<华为云Classroom赋能-TooKit助力开发者上云>,作者:华为云PaaS服务小智 . 对于资深程序员而言,IDE是必不可少的,它好比是剑客手中的宝剑,IDE帮 ...

  6. 云小课｜基于华为云WAF的日志运维分析，构筑设备安全的城墙

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:云日志服务用于收集 ...

  7. 使用 Zpan 搭建低成本个人私有网盘，还不限速

    摘要:本文就介绍一个不限速的低成本个人网盘--ZPan,相较于老牌的私有网盘 OwnCloud 等,Zpan 有一个独有的优势:不限速. 本文分享自华为云社区<使用 Zpan 搭建低成本个人私有 ...

  8. 实践丨手把手教你用STM32设计WiFi语音播报日程表

    摘要:随着电子产品的发展,数字日程表这项应用在人们工作和生活中起到越来越重要的作用.本文带领大家基于STM32自己动手制作一个WiFi语音播报日程表. 本文分享自华为云社区<基于STM32设计的 ...

  9. nginx 限制ip访问，禁止非法域名指向本机ip——防止被别人绑定域名到自己IP的方法

    网站从国内迁移到国外,镜像主机没有配置域名(等配置好了,再配置域名),然后迁移完成了后,网站被不知道哪家的域名指向了本站服务器(很可能是某些人和组织,养域名卖的--具体是何套路,请哪位道友指教) 今天 ...

  10. 火山引擎 DataLeap：3 小时分享，体系化讲透企业数据治理如何做？

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 数据治理伴随着数据全生命周期的进程,涉及事前规范检查.事中监控管理.事后优化复盘等过程,关键重点领域包括数据质量的 ...