<!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. MyBatisPlus-使用步骤

    MyBatisPlus-使用步骤 第一步 引入maven坐标依赖 <dependency> <groupId>com.baomidou</groupId> < ...

  2. ElasticSearch之Analyze index disk usage API

    本API用于分析.统计指定index当前占用的存储空间. 考虑到本特性目前仍然处于预览状态,因此使用方法.参数等可能会发生变化,或者未来也许会被删除. 本API暂时不建议在生产系统中使用. 命令样例如 ...

  3. CentOS基线检测脚本

    本脚本适用于CentOS 7.5-7.9版本,其他版本不详 1.检查系统信息 查看代码 echo " " echo "########################## ...

  4. .Net人的自我修养-书目汇总

    .Net人的自我修养-书目汇总 2019年来现在的公司开始从事.Net相关的工作.记录一下工作以来看过(或者翻过)和听过还不错打算看相关的技术书籍或资料. 为了方便给大家参考,看(翻)过书目以难度排序 ...

  5. Spring事务状态处理

    Spring事务提交后执行:深入理解和实践 在Java开发中,Spring框架的事务管理是一个核心概念,尤其是在企业级应用中.理解和正确使用Spring事务对于保证应用的数据一致性和稳定性至关重要.本 ...

  6. 2023“强网杯”部分WP

    强网先锋 SpeedUp 题目 我的解答: 分析代码可知是求2的27次方的阶乘的每一位的和. 使用在线网址直接查看:https://oeis.org/A244060/list 然后sha256加密 f ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （126）-- 算法导论11.1 1题

    一.用go语言,假设一动态集合 S用一个长度为 m 的直接寻址表T来表示.请给出一个查找 S 中最大元素的过程.你所给的过程在最坏情况下的运行时间是多少? 文心一言,代码正常运行: 在这个问题中,我们 ...

  8. 教你如何基于MindSpore进行ChatGLM微调

    本文分享自华为云社区<基于MindSpore的ChatGLM微调>,作者: JeffDing . 基于MindSpore的ChatGLM微调 克隆Hugging Face模型 克隆chat ...

  9. 技术解读丨GaussDB数仓高可用容灾利器之逻辑备份

    摘要:GaussDB数仓的Roach工具,同时提供物理备份和逻辑备份两种主要形态的备份.逻辑备份针对数据库的逻辑对象进行抽取和备份,能够有效地应对单表.schema级等较细粒度的备份,较为灵活和便利. ...

  10. PPT 动画-莲花绽放

    画两圆,合并形状 -> 相交 复制8个图片,一共9片 旋转 最后动画 -> 平滑