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来实现翻书效果,结果效果都不是非常的理想 ...

随机推荐

深入hibernate的三种状态【转载】
这篇文章写得很好,举了很多例子. http://www.cnblogs.com/xiaoluo501395377/p/3380270.html
Google辅助类软件
本博文的主要内容有 .Google辅助类软件的介绍 .重点首推! Google软件精选管理器 1.Google辅助类软件的介绍 1. Google软件精选管理器的下载和安装使用 2. Googl ...
Abator自动生成ibatis的相关配置和类
一.abator自动生成配置: abator自动生成ibatis的配置文件.mode.sqlMap.dao.bean实例准备: 1.安装Eclipse插件: 要求eclipse3.1, ...
javaWeb上传文件代码
javaweb两种方式的上传,1普通上传,2:jquery ajax后台上传,部分截图如下: 完成包下载,下载后倒入myeclipse工程即可,下载地址:http://files.cnblogs.co ...
c++文件流
前言文件流能够从文件系统中读取数据并向文件中写入数据. 文件输入流适用于读取配置数据.读取保存的文件以及批处理基于文件的数据等任务.Fprintf,fwrite,fputs 文件输出流适用于保存状态 ...
winfrom 操作 INI 文件分类： WinForm 2014-07-22 12:49 156人阅读评论(0) 收藏
<strong><span style="font-size:18px;">(1)INI文件的名称:FileConfig.ini</span>& ...
Tomcat工作原理(转)
Tomcat简介作者:杨晓(http://blog.sina.com.cn/u/1237288325) 一.Tomcat背景自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group ...
php 判断数组相等数组运算符介绍
如何判断两个数组相等呢?其实很简单,用 == 或者 === 就可以了 php手册里说明如下, 例子名称结果 $a + $b 联合 $a 和 $b 的联合. $a == $b 相等如果 $a 和 ...
python模拟登陆之下载
好长时间没有更新博客了,哈哈. 今天公司给了这么一个需求,现在我们需要去淘宝获取上一天的订单号,然后再根据订单号去另一个接口去获取订单详情,然后再给我展示到web! 中间涉及到的技术点有: 模拟登陆 ...
windows使用python调用wget批处理下载数据
wget是linux/unix下通常使用的下载http/ftp的数据,使用非常方便,其实wget目前经过编译,也可在windows下使用.最近需要下载大量的遥感数据,使用了python写了批处理下载程 ...

css3 翻书效果

样式

HTML DOM

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

随机推荐

热门专题