<!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. 搭建vulfocus靶场

    搭建vulfocus靶场 第一种方法 docker pull一下执行如下命令即可 docker pull vulfocus/vulfocus:latest docker run -d -p 8081: ...

  2. 【OpenCV】在MacOS上使用OpenCvSharp

    前言   OpenCV是一个基于Apache2.0许可(开源)发行的跨平台计算机视觉和机器学习软件库,它具有C++,Python,Java和MATLAB接口,并支持Windows,Linux,Andr ...

  3. BUUCTF Reverse 新年快乐

    下载文件先查壳,可以看到有UPX壳 用upx脱壳 拖到ida pro32,shift+F12查看字符串,看到关键字flag,双击进去 双击然后f5查看伪代码 main函数伪代码 关键函数: strnc ...

  4. DVWA File Upload（文件上传）全等级

    File Upload(文件上传) 目录: File Upload(文件上传) 一句话木马的构成 1. Low 1.上传一句话木马1.php 2.中国蚁剑 2.Medium 3. High 4.Imp ...

  5. Spring Boot3 系列：Spring Boot3 跨域配置 Cors

    目录 什么是CORS? Spring Boot 如何配置CORS? 前端代码 注解配置 全局配置 过滤器配置 注意事项 什么是CORS? CORS,全称是"跨源资源共享"(Cros ...

  6. CUDA C编程权威指南：1.2-CUDA基础知识点梳理

      主要整理了N多年前(2013年)学习CUDA的时候开始总结的知识点,好长时间不写CUDA代码了,现在LLM推理需要重新学习CUDA编程,看来出来混迟早要还的. 1.闭扫描和开扫描   对于一个二元 ...

  7. ECS实践案例丨逻辑卷的创建和扩容操作指导

    摘要:实现跨硬盘使用,在传统硬盘之上的一层,在云服务器中可以实现跨EVS使用,用户在某些场景需要创建逻辑卷或者对已有的逻辑卷进行扩容处理,或者在某些时候由于误操作导致上述操作失败. [背景描述]: 实 ...

  8. 云图说｜每个成功的业务系统都离不开APIG的保驾护航

    摘要:华为云API网关(APIG)是为企业开发者及合作伙伴提供的高性能.高可用.高安全的API托管服务, 帮助企业轻松构建.管理和部署不同规模的API. 本文分享自华为云社区<[云图说]第243 ...

  9. 实践解析可视化开发平台FlinkSever优势

    摘要:华为Flink可视化开发平台FlinkServer作为自研服务,能够提供比原生flinksql接口更强的企业级特性,比如任务的集中管理,可视化开发,多数据源配置等. 本文分享自华为云社区< ...

  10. ImproperlyConfigured('SQLite 3.8.3 or later is required Centos升级SQLite

    遇到这个错误可以选择给django降级,不建议 这里选择升级SQLite 1.查看版本 sqlite3 --version 2.Centos7安装最新的sqlite3 wget https://www ...