翻页效果

作者: itdingrui | 来源:发表于2016-12-05 00:20 被阅读0次

翻页效果
翻页效果
日历翻页效果
翻页效果容器
前端知识特征布局实例
Flutter Animation Demo（简单翻转卡片示例）
UIPageViewController的用法
ios 翻页效果动画
Android RecycleView + SnapHelper
UIPageViewController使用分享笔记

设定翻页转轴transform-origin: left center;左边中心；

设定页面翻页层级：page页面和front页面z-index:2;其余z-index:1;

注意每次填图片前先清运动效果，使其页面front等先返回原位置。

翻页方法：
前页： backface-visibility:hidden;
z-index:2;
后页：transform:scale(-1,1);
z-index:1;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{margin:0;padding:0;}
        html,body{overflow:hidden;}
        #box{
            background:url("img/0.jpg")no-repeat;
            width:700px;
            height:400px;
            margin:100px auto;
            position:relative;
        }
        #box .page{
            width:50%;
            height:100%;
            top:0;
            right:0;
            position:absolute;
            transform-style:preserve-3d;
            transform-origin: left center;
            transition:1s all ease;
            z-index:2;
            transform:perspective(800px) rotateY(0deg);
        }
        .page div{
            width:100%;
            height:100%;
            left:0;
            top:0;
        }
        .page .front{
            background:url("img/0.jpg")right top no-repeat;
            position:absolute;
            backface-visibility:hidden;
            z-index:2;
        }
        .page .back{
            background:url("img/1.jpg") left top no-repeat;
            position:absolute;
            transform:scale(-1,1);
            z-index:1;
        }
        #box .page2{
            width:50%;
            height:100%;
            top:0;
            right:0;
            position:absolute;
            background:url("img/1.jpg") right top;
            z-index:1;
        }
    </style>
    <body>
<div id="box">
    <div class="page">
        <div class="front"></div>
        <div class="back"></div>
    </div>
    <div class="page2"></div>
</div>
    </body>
</html>
<script>
    document.addEventListener('DOMContentLoaded',function(){
        var oBox=document.getElementById('box');
        var oPage=document.querySelector('.page');
        var oPage2=document.querySelector('.page2');
        var oFront=document.querySelector('.front');
        var oBack=document.querySelector('.back');
        var iNow=0;
        var bReady=true;
        oBox.onclick=function(){
            if(bReady==false)return;
            bReady=false;
            iNow++;
            oPage.style.transition='1s all ease';
            oPage.style.WebkitTransform='perspective(800px) rotateY(-180deg)';          
        };
        oPage.addEventListener('transitionend',function(){
            oPage.style.transition='none';
            oPage.style.WebkitTransform='perspective(800px) rotateY(0deg)';
            oBox.style.background='url("img/'+(iNow%3)+'.jpg")no-repeat';
            oFront.style.background='url("img/'+(iNow%3)+'.jpg")right top no-repeat';
            oBack.style.background='url("img/'+((iNow+1)%3)+'.jpg")left top no-repeat';
            oPage2.style.background='url("img/'+((iNow+1)%3)+'.jpg")right top no-repeat';
            bReady=true;
        },false);
    },false);
</script>