<!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. python 获取android 应用使用情况

    python 获取android 应用使用情况 本文主要讲述python 脚本获取android 应用使用情况. 主要思路:使用adb 获取当前activity ,1s 一次输出. 主要涉及知识点: ...

  2. MinIO客户端之diff

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc diff 检查指定桶内对象清单的差异,注意不比较对象内容的差异,命令如下: ./mc diff local1 ...

  3. ElasticSearch之虚拟内存

    查看当前Linux系统中vm.max_map_count变量的值,命令如下: sysctl vm.max_map_count 执行结果的样例,如下: vm.max_map_count = 65530 ...

  4. [笔记01]---solr

    什么是Solr 1.直接使用sql搜索存在的问题 大多数搜索引擎应用都必须具有某种搜索功能 搜索功能往往是巨大的资源消耗 它们由于沉重的数据库加载而拖垮你的应用的性能 所有我们一般在做搜索的时候 会把 ...

  5. 学会@ConfigurationProperties月薪过三千

    学习 @ConfigurationProperties 之前我们需要一些前置知识点: @Value是个什么东西 首先明确:@ConfigurationProperties 是 SpringBoot 注 ...

  6. ThreadLocal真的会造成内存泄漏吗？

    ThreadLoca在并发场景中,应用非常多.那ThreadLocal是不是真的会造成内存泄漏?今天给大家做一个分享,个人见解,仅供参考. 1.ThreadLocal的基本原理 简单介绍一下Threa ...

  7. 为什么maven配置完Tomcat且运行之后页面内容没有显示出来？

    1.如何在maven项目中配置一个webapp项目? 首先新建一个maven项目 项目目录 <?xml version="1.0" encoding="UTF-8& ...

  8. Programming Abstractions in C阅读笔记：p196

    <Programming Abstractions in C>学习第63天,p196总结.涉及到编程之外的知识,依然是读起来很费劲,需要了解作者在书中提到的人物(Edouard Lucas ...

  9. 云图说｜分钟级构建业务大屏——Astro大屏应用

    本文分享自华为云社区<[云图说]第271期 Astro Canvas一站式数据可视化开发,分钟级构建业务大屏>,作者:阅识风云 . Astro大屏应用(Astro Canvas)是Astr ...

  10. 华为云·云享专家李万龙： IoT 梦想，从0到1的实现

    摘要:掀翻35岁IT人退役魔咒,站在巨人肩膀上,应用新技术,结合经验,整体方案优势,让IoT快速生花,这就是李万龙的最新感悟. 随着过去几年传感器和终端设备长足的发展,加上通讯连接在带宽和速度上的大幅 ...