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

当前位置:主页 > CSS3库 > css3 transform > html5+css3+js超逼真翻书效果
html5+css3+js超逼真翻书效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:10-23
    阅读:

简要教程

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

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

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

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