css3 翻书效果
2015-12-09 18:57
561 查看
1
3
2
4
5
3
2
4
5
样式
#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: 2; -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: 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); }
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>
相关文章推荐
- Spanny字符串样式处理使用心得。
- css选择器
- css初始化代码
- CSS ::Selection的使用方法
- CSS 属性 - 伪类和伪元素的区别
- css3之background-origin和background-clip的区别与联系
- 前端性能优化之CSS详细解读
- CSS3 线性渐变(linear-gradient)
- css设置文件编码
- css动画
- html css 十一条网页设计经典实用的代码片段
- css:条件注释判断浏览器
- avalon对于视图样式的动态更新
- knockout之各种数据绑定方法:text、attr、visible、html、css、style绑定
- css设置各种中文字体如雅黑、黑体、宋体、楷体等等
- word中字体大小(pt)和网页中css设置font-size时用的px大小对应关系
- css font-family大全
- css3学习笔记(二)
- css样式大全
- 利用 CSS3 判断手机是横屏还是竖屏