用css3和javascript做一个翻页动画<Action>

如有疑问请参照我的上一篇随笔：http://www.cnblogs.com/kodoyang/p/Html_Css3_CardPage_Prepare.html

设置了六个卡片的div并初始化，用javascript函数改变它们的旋转属性。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>card page</title>
    <style>
        #my3dspace {
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;

            overflow: hidden;
        }
        #pagegroup {
            width: 400px;
            height: 400px;
            margin: 0 auto;

            -webkit-transform-style: preserve-3d;

            position: relative;
        }
        .page{
            width: 300px;
            height: 300px;
            padding: 20px;
            background-color: black;

            color: white;

            font-weight: hold;
            font-size: 300px;
            line-height: 300px;
            text-align: center;

            position: absolute;
        }
        #page1 {
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }
        #page2, #page3, #page4, #page5, #page6 {
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform: rotateX(90deg);
        }

        #op {
            text-align: center;
            margin: 40px auto;
        }
    </style>
    <script>
        var curIndex = 1;

        function next(){

            if( curIndex == 6 )
                return;

            var curPage = document.getElementById("page" + curIndex);
            curPage.style.webkitTransform = "rotateX(-90deg)";

            ++curIndex;
            var nextPage = document.getElementById("page" + curIndex);
            nextPage.style.webkitTransform = "rotateX(0deg)";
        }

        function prev(){
            if( curIndex == 1 )
                return;

            var curPage = document.getElementById("page" + curIndex);
            curPage.style.webkitTransform = "rotateX(90deg)";

            --curIndex;
            var prevPage = document.getElementById("page" + curIndex);
            prevPage.style.webkitTransform = "rotateX(0deg)";
        }
    </script>
</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript:next();">next</a>&nbsp;
        <a href="javascript:prev();">prev</a>
    </div>
</body>
</html>

下面是它的效果截图：

这一篇写了不少了，就先到此吧

更多好文请关注：http://www.cnblogs.com/kodoyang/

css3 --- 翻页动画 --- javascript --- 3d --- Action的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. WPF中ListBox ListView数据翻页浏览笔记（强调：是数据翻页，非翻页动画）

    ListBox和ListView在应用中,常常有需求关于每页显示固定数量的数据,然后通过Timer自动或者手动翻页操作,本文介绍到的就是该动作的实现. 一.重点 对于ListBox和ListView来 ...

  7. 如何用纯 CSS 创作一个记事本翻页动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKOPGw 可交互视频教 ...

  8. swiper.animate--css3翻页动画

    基于swiper 的 animate动画,适用于Swiper2.x和Swiper3.x . 1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate. ...

  9. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

随机推荐

  1. C++:构造函数的默认参数知识拓展

    和普通函数一样,构造函数中参数的值既可以通过实参传递,也可以指定为某些默认值,即如果用户不指定实参值,编译系统就使形参取默认值.   例9.3的问题也可以使用包含默认参数的构造函数来处理.   [例9 ...

  2. SpringBoot配置属性之Server

    SpringBoot配置属性系列 SpringBoot配置属性之MVC SpringBoot配置属性之Server SpringBoot配置属性之DataSource SpringBoot配置属性之N ...

  3. Android开发实例详解之IMF（Android SDK Sample—SoftKeyboard）

    本博前面的文章介绍了Android开发环境的搭建和模拟器的常用操作.本次,将以Android Sample中经典的SoftKeyboard项目为例,详细解析Android上一个小型项目的开发过程和注意 ...

  4. asp.net mvc4使用百度ueditor编辑器

    原文  http://www.cnblogs.com/flykai/p/3285307.html    已测试 相当不错 前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好 ...

  5. linux中/etc/init.d [转]

    一.关于/etc/init.d 如果你使用过linux系统,那么你一定听说过init.d目录.这个目录到底是干嘛的呢?它归根结底只做了一件事情,但这件事情非同小可,是为整个系统做的,因此它非常重要.i ...

  6. 验证码图片生成工具类——Captcha.java

    验证码图片生成工具,使用JAVA生成的图片验证码,调用getRandcode方法获取图片验证码,以流的方式传输到前端页面. 源码如下:(点击下载  Captcha.java) import java. ...

  7. 寻找最小的k个数

    1. 能想到的最直接的办法,就是对数组进行排序,最好的排序算法的时间复杂性为O(n*logn),这一个方法请参照各种排序算法. 2. 另外申请一个k空间数组,依次更改里面的最大值,每做一次最多要扫描一 ...

  8. Python学习之类

    class Person: def __init__(self, name): self.name = name def sayHi(self): print('Hello, my name is'+ ...

  9. [HDOJ5584]LCM Walk（数论，规律）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5584 给一个坐标(ex, ey),问是由哪几个点走过来的.走的规则是x或者y加上他们的最小公倍数lcm ...

  10. 如何有效地报告 Bug

    如何有效地报告 Bug 引言 为公众写过软件的人,大概都收到过很拙劣的bug(计算机程序代码中的错误或程序运行时的瑕疵--译者注)报告,例如: 在报告中说"不好用": 所报告内容毫 ...