<!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. eclipse 使用技巧和java相关

    1,内容提示:alt + /     需要配置:windwos ->preferences中搜索keys,搜索alt +/ 发现它配置的是单词完成.搜索content  assist,将alt ...

  2. Spring Boot中设置定时发送邮件任务

    1:浅谈发送邮箱: 邮箱验证是一个很常见的功能了,基本上每个网站都会用的到, java也有专门的jar来处理邮件发送等服务 2:学过javaweb大家都对发送邮箱上不是很陌生了吧 但之前发送邮箱的步骤 ...

  3. JavaFx css样式（三）

    JavaFx css样式(三) JavaFX 从入门入门到入土系列 JavaFx css样式,前面我说过它类似html,他有css控制样式,不过最新的css标准并不支持,同时javafx的css样式都 ...

  4. 微信小程序数组

    常用函数 concat(): 连接两个或多个数组,返回连接后的新数组. 示例:const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = ...

  5. 当 BACnet 遇上 IoT，你将体验到不一样的大楼

    本文分享自华为云社区<当 BACnet 遇上 IoT>,作者:美码师zale . 引言 在十四五规划中,"新基建"无疑是倍受关注的重点领域.而关于"新基建&q ...

  6. 实践案例丨CenterNet-Hourglass论文复现

    摘要:本案例是CenterNet-Hourglass论文复现的体验案例,此模型是对Objects as Points 中提出的CenterNet进行结果复现. 本文分享自华为云社区<Center ...

  7. 在云南，我用华为云AI开发出千万级用户的应用

    摘要:创造无限,当"燃"是开发者,华为云1024程序员节,陶新乐和大家分享独立开发者的自由之路. 本文分享自华为云社区<在云南,我用华为云AI开发出千万级用户的应用>, ...

  8. 顶会VLDB‘22论文解读：CAE-ENSEMBLE算法

    摘要:针对时间序列离群点检测问题,提出了基于CNN-AutoEncoder和集成学习的CAE-ENSEMBLE深度神经网络算法,并通过大量的实验证明CAE-ENSEMBLE算法能有效提高时间序列离群点 ...

  9. 协同文档：OT与CRDT实现协同编辑笔记

    讲协同编辑,先回顾下从BBS.邮件,到IM 信息的异步传播 信息的生产和消费异步发生. 典型的场景如论坛,博客,文档库,邮件.我在写这篇文档的时候,你们看不到.你们看的时候,我早已写完.异步场景下,信 ...

  10. SyntaxError: Non-ASCII character #-*- coding:utf-8 -*-

    执行python报错 /usr/bin/python2.7 /root/demo.py File "/root/demo.py", line 2 SyntaxError: Non- ...