css3 翻书效果

div
{
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
width: 285px;
height: 388px;
background: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_1.jpg) no-repeat;
background-size: 100% 100%;
}
#p1 > div > div
{
width: 10px;
height: 388px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}

#p2 > div
{
width: 285px;
height: 388px;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
position: absolute;
z-index: 1;
background: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_2.jpg) no-repeat;
background-size: 100% 100%;
}
#r3
{
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 2;
}

#s3
{
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 1;
}
#page-flip:hover #s3
{
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3
{
width: 25px;
height: 1000px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
overflow: hidden;
}
#page-flip:hover #sp3
{
width: 11px;
}
.s
{
width: 285px;
height: 388px;
position: absolute;
overflow: hidden;
z-index: 3;
}
#s2
{
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
}
#sp2
{
width: 15px;
height: 1000px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
overflow: hidden;
}
#s4
{
opacity: 1;
-webkit-transition-duration: 0.5s;
}
#page-flip:hover #s4
{
opacity: 0;
}
#page-flip:hover #s2
{
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
}
#p3
{
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p3 > div
{
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
width: 285px;
height: 388px;
background: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_4.jpg) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
#p3 > div > div
{
width: 9px;
height: 500px;
float: right;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
}

#page-flip:hover #r1
{
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div
{
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3
{
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div
{
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
}
-->

样式

　　　　 #all {

            width: 680px;

            margin-left: auto;

            margin-right: auto;

        }

        #page-flip {

            position: relative;

            padding: 40px 40px 40px 340px;

            width: 300px;

            height: 400px;

            overflow: hidden;

        }

        #r1 {

            position: absolute;

            z-index:;

            -webkit-transform-origin: 1315px 500px;

            -webkit-transform: translate(-1030px, -500px) rotate(-32deg);

            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

            -webkit-transition-duration: 1s;

        }

        #p1 {

            width: 1285px;

            height: 1388px;

            overflow: hidden;

        }

        #p1 > div {

            -webkit-transform-origin: 285px 0;

            -webkit-transform: translate(1030px, 500px) rotate(32deg);

            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

            -webkit-transition-duration: 1s;

            width: 285px;

            height: 388px;

            background: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_1.jpg) no-repeat;

            background-size: 100% 100%;

        }

        #p1 > div > div {

            width: 10px;

            height: 388px;

            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));

        }

        #p2 > div {

            width: 285px;

            height: 388px;

            -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);

            position: absolute;

            z-index:;

            background: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_2.jpg) no-repeat;

            background-size: 100% 100%;

        }

        #r3 {

            -webkit-transform-origin: 1315px 500px;

            -webkit-transform: translate(-1030px, -500px) rotate(-32deg);

            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

            -webkit-transition-duration: 1s;

            position: absolute;

            z-index:;

        }

        #s3 {

            -webkit-transform-origin: 70px 500px;

            -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);

            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

            -webkit-transition-duration: 1s;

            position: absolute;

            z-index:;

        }

        #page-flip:hover #s3 {

            -webkit-transform-origin: 325px 500px;

            -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);

        }

        #sp3 {

            width: 25px;

            height: 1000px;

            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));

            -webkit-transition-property: width;

            -webkit-transition-duration: 1s;

            overflow: hidden;

        }

        #page-flip:hover #sp3 {

            width: 11px;

        }

        .s {

            width: 285px;

            height: 388px;

            position: absolute;

            overflow: hidden;

            z-index:;

        }

        #s2 {

            -webkit-transform-origin: 45px 500px;

            -webkit-transform: translate(240px, -500px) rotate(-32deg);

            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

            -webkit-transition-duration: 1s;

            position: absolute;

        }

        #sp2 {

            width: 15px;

            height: 1000px;

            background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));

            overflow: hidden;

        }

        #s4 {

            opacity:;

            -webkit-transition-duration: 0.5s;

        }

        #page-flip:hover #s4 {

            opacity:;

        }

        #page-flip:hover #s2 {

            -webkit-transform-origin: 300px 500px;

            -webkit-transform: translate(-15px, -500px) rotate(0deg);

        }

        #p3 {

            width: 1285px;

            height: 1388px;

            overflow: hidden;

        }

        #p3 > div {

            -webkit-transform-origin: 0 0;

            -webkit-transform: translate(1255px, 500px) rotate(-32deg);

            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

            -webkit-transition-duration: 1s;

            -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);

            width: 285px;

            height: 388px;

            background: url(http://images.cnblogs.com/cnblogs_com/iphone6s/765364/o_4.jpg) no-repeat;

            background-size: 100% 100%;

            overflow: hidden;

        }

        #p3 > div > div {

            width: 9px;

            height: 500px;

            float: right;

            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));

        }

        #page-flip:hover #r1 {

            -webkit-transform-origin: 1570px 500px;

            -webkit-transform: translate(-1285px, -500px) rotate(0deg);

        }

        #page-flip:hover #p1 > div {

            -webkit-transform-origin: 285px 0;

            -webkit-transform: translate(1285px, 500px) rotate(0deg);

        }

        #page-flip:hover #r3 {

            -webkit-transform-origin: 1570px 500px;

            -webkit-transform: translate(-1285px, -500px) rotate(0deg);

        }

        #page-flip:hover #p3 > div {

            -webkit-transform-origin: 0 0;

            -webkit-transform: translate(1000px, 500px) rotate(0deg);

        }

HTML DOM

<div id="all">

        <div id="page-flip">

            <div id="r1"><div id="p1"><div><div>1</div></div></div></div>

            <div id="p2"><div>3</div></div>

            <div id="r3"><div id="p3"><div><div>2</div></div></div></div>

            <div class="s"><div id="s3"><div id="sp3">4</div></div></div>

            <div class="s" id="s4"><div id="s2"><div id="sp2">5</div></div></div>

        </div>

    </div>

css3 翻书效果的更多相关文章

css3翻书效果
强大的css3不需要解释,代码分层理解[直接复制],很有意思. 效果图: <ul class="align"> <li> <figure class= ...
基于CSS3新属性Animation及transform实现类似翻书效果
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...
css3特效第一篇--旋转的背景&翻书效果
一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...
[知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果
一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...
纯css实现翻书效果
前言最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...
15 个最佳 jQuery 翻书效果插件
本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1. BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...
turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
Unity3d:megaFierstext（翻书效果插件）
附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...
Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

随机推荐

ReactiveCocoa Tutorial
ReactiveCocoa Tutorial – The Definitive Introduction: Part 1/2 ReactiveCocoa教程——明确的介绍:第一部分(共两部分) As ...
SIP协议错误代码大全
100 Trying 说明caller正在呼叫,但还没联系上callee. 180 Ringing 说明callee已经被联系上,callee的铃正在响.收到这个信息后,等待200 OK 181 Ca ...
mysql 表设计
Relocation - POJ 2923（状态压缩+01背包）
题目大意:有个人需要搬家,有N件物品,给个物品的重量是 w[i] 然后又两个车,每个车的载重量分别是C1和C2,求最少需要运输多少次才能把这些物品全部运输完毕. 分析:刚开始就发现物品数不多,想着直接 ...
Archipelago - SGU 120（计算几何向量旋转）
题目大意:有一个正N边形,然后给出两个点,求出剩余的点的坐标. 分析:向量旋转可以求出坐标,顺时针旋转时候,x = x'*cos(a) + y'*sin(a), y=-x'*sin(a) + y'*c ...
Away3D ATFTexture
之前在项目中贴图大量使用了 PNG 和 jpg 遇到了个问题.在使用BitmapTexture的时候发现是必须MIP 不管你是否开启或者关闭 MIP 他都会去创建.而每次MIP都会根据贴图大小去生 ...
各种Markdown处理器的列表
从MarkdownImplementations - Markdown Community Group可以找到一个实现markdown处理器的列表,如下: Name Language Type Des ...
【设计模式 - 4】之原型模式（Prototype）
1 模式简介原型模式的定义:通过复制一个现有的对象(原型)来得到一个相似的对象. 原型模式的UML图如下图所示: 从上图中可以看到,所有的对象实体类都是继承自一个Prototype的父类, ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（20）-权限管理系统-根据权限获取菜单
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(20)-权限管理系统-根据权限获取菜单不知不觉到20讲,真是漫长的日子,可惜最近工作挺忙,要不可以有更多 ...
WWDC-UIKit 中协议与值类型编程实战
本文为 WWDC 2016 Session 419 的部分内容笔记.强烈推荐观看. 设计师来需求了在我们的 App 中,通常需要自定义一些视图.例如下图: 我们可能会在很多地方用到右边为内容,左边有 ...

css3 翻书效果

样式

HTML DOM

css3 翻书效果的更多相关文章

随机推荐

热门专题