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

随机推荐

两种常用的MySQL官方客户端软件
本博文的主要内容有 .命令行客户端软件---MySQL Command Line Client .MySQL-Workbench客户端软件 1.命令行客户端软件---MySQL Command Lin ...
spark 启动时候报 Unable to load native-hadoop library for your platform 警告
hadoop2.6.4 jdk1.8 spark2.0.1 方案1: 在spark的conf目录下,修改spark-env.sh文件加入LD_LIBRARY_PATH环境变量,值为hadoop的nat ...
用mysqlslap压测mysql
参考文献:http://my.oschina.net/costaxu/blog/108568 上面网友详细的列举了用mysqlslap对mysql的压力测试结果,我也照葫芦画瓢试了一次,结果如下: 以 ...
centos7 mysql 5.6.30 默认配置文件
默认配置 vim /etc/my.cnf.rpmsave mysql Ver 14.14 Distrib 5.6.30, for linux-glibc2.5 (x86_64) using E ...
bootbox.js [v4.2.0]设置确认框按钮语言为中文
Bootbox.js (http://bootboxjs.com/)是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Twitter 的 Bootstrap 开发. 弹出确认框方 ...
Away3d 骨骼动画优化
很多朋友说Away3D 的骨骼数限制在32根,确切的说应该是Stage3D 的限制.在 AGAL2.0之前 VC寄存器是128个,每个vc常量寄存器最大只能容纳4位,transform占用一个4*4的 ...
Python基础知识---字典
现在在实习期间,好久没用Python了,今天在做Java项目时用的HashMap让我联想到了Python中的字典,就写一些Python字典的知识吧,复习复习. 字典: key --> valu ...
计算机体系结构 -内存优化vm+oom
http://www.cnblogs.com/dkblog/archive/2011/09/06/2168721.htmlhttps://www.kernel.org/doc/Documentatio ...
UNIX环境高级编程第二版代码笔记
1. 第一个程序 gcc 1.1.c /tmp/ccbnJqcB.o: In function `main': 1.1.c:(.text+0x17): undefined reference to ...
（转载）linux那点事儿（上）
原文地址:http://www.cnblogs.com/fnng/archive/2012/03/19/2407162.html 本文只是转载供自己学习之用本文算是学linux的学习笔记吧!其实li ...

css3 翻书效果

样式

HTML DOM

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

随机推荐

热门专题