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

随机推荐

HTML-通过点击网页上的文字弹出QQ添加好友页面
在网上参考了部分方法,综合了一下. 发现有2中方式: 第一种是不能直接弹出添加界面的,只能弹出网页,再通过网页中的添加好友才能添加: 弹出的网页是这样的(我是写成在新的网页中打开) 现在看实现的代码: ...
出现 HTTP Error 503. The service is unavailable 错误
今天修改一些配置后重启了IIS,兴高采烈的按下了回车.duang一下,HTTP Error 503. The service is unavailable,蹦出这行字,网站挂了. 没动别的竟然这样了. ...
用Delphi制作仿每行带按钮的列表
Delphi做程序开发在使用到列表控件时,一般是列表放文本内容,在列表以外放操作按钮,选中列表某项再点按钮进行操作.现在Web开发做列表的样式总是列表的每行都有操作按钮,如微博的列表风格: Web开发 ...
bzoj 2819 Nim（BIT，dfs序，LCA）
2819: Nim Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1596 Solved: 597[Submit][Status][Discuss] ...
iOS设备保持横排方向
//保持横排方向 -(NSUInteger)supportedInterfaceOrientations{ returnUIInterfaceOrientationMaskLandscapeL ...
Spoj 7001 Visible Lattice Points 莫比乌斯,分块
题目:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=37193 Visible Lattice Points Time L ...
mongodb基本概念解析
MongoDB 概念解析不管我们学习什么数据库都应该学习其中的基础概念,在mongodb中基本的概念是文档.集合.数据库,下面我们挨个介绍. 下表将帮助您更容易理解Mongo中的一些概念: SQL术 ...
用python正则表达式提取字符串
在日常工作中经常遇见在文本中提取特定位置字符串的需求.python的正则性能好,很适合做这类字符串的提取,这里讲一下提取的技巧,正则表达式的基础知识就不说了,有兴趣的可以看re的教程. 提取一般分两种 ...
【OpenCV入门教程之一】安装OpenCV：OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置
本系列文章由@浅墨_毛星云出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/19809337 作者:毛星云(浅墨 ...
HDU2699+Easy
简单题. /* */ #include<stdio.h> #include<string.h> #include<stdlib.h> #include<alg ...

css3 翻书效果

样式

HTML DOM

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

随机推荐

热门专题