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

随机推荐

php 错误信息配置
display_errors = on/off错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. ...
GraphViz特性笔记（一）
默认纵向,使用“rankdir="LR";”可使视图横向排列: 定义节点可以单独列出,“0;”方便自动生成: “edge[fontname="微软雅黑"];”设 ...
socket programming Max size of tcp/ip socket Buffer?
TCP data is buffered at both sender and receiver. The size of the receiver's socket receive buffer d ...
linux平台MongoDB数据库安装
跟Ruiy哥一起玩转吧; <一,初始化玩转MongoDB> 1,关闭SElinux(Ruiy哥根据经验知红帽的SElinux架设就是个错误,还记得不管啥结构首先要关闭的就是它); 2,设置 ...
Java Struts2 的请求处理流程详解
一.Struts2的处理流程: 客户端产生一个HttpServletRequest的请求,该请求被提交到一系列的标准过滤器(Filter)组建链中(如ActionContextCleanUp:它主要是 ...
redis基本用法
java连接redis基本用法 package Redis; import java.util.HashMap; import java.util.List; import java.uti ...
ELK初学搭建(elasticsearch)
ELK初学搭建(elasticsearch) elasticsearch logstash kibana ELK初学搭建 elasticsearch 1.环境准备 centos6.8_64 mini ...
前端性能优化：使用Data URI代替图片SRC
日期:2013-7-6 来源:GBin1.com 提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量.减少请求可以让你的网站加载更快,而其中一 ...
ASP.NET常用导出Excel方法汇总
本文转载:http://mattberseth.com/blog/2007/04/export_gridview_to_excel_1.html http://geekswithblogs.net/a ...
基于amoeba实现mysql数据库的读写分离/负载均衡
一.Amoeba的简述:[来自百度百科] Amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy.它集中地响应应用的请求,依据用户事先设置的规则,将SQL请 ...

css3 翻书效果

样式

HTML DOM

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

随机推荐

热门专题