欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > css3库 > CSS3 transform > html5+css3+js超逼真翻书效果

html5+css3+js超逼真翻书效果

html5+css3+js超逼真翻书效果

关键词:翻书效果,翻页效果,html5翻书效果,html5翻页效果,翻书动画,html5翻页,css3翻书效果,css3翻页效果,js翻书效果,js翻页特效,翻书,css3库,css3transform

描述:这是一款大师级的html5翻书效果(翻页效果),这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时,书本打开动画。注意:必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。

简要教程

本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性。这里将给你展示两种不同的图书设计:精装书和平装书。这两种设计只需要简单的改变一些css样式、图片和其他一些小细节就可以完成。

精装书由三个部分组成:书的封面、书的脊柱和书的背面。每一个部分都将由伪元素来提供一些厚度。

相对于精致书来说,平装书的设计要简单一些。它由一些平面纸组成,没有书的脊柱,只有书的封面、内页和书的背面。

更详细的教程请参看《利用CSS3 3D TRANSFORM制作超逼真翻书效果

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/css3_css3transform/115.html

 在线演示  免费下载
编号:201611230000000115
大小:0.1MB
上传时间:2016-11-24 16:35
素材由用户"123260051"上传分享。

标签

最新推荐素材

与html5+css3+js超逼真翻书效果相关的素材

.