绝对令人的惊叹的CSS3折叠效果(3D效果)整理


Posted in HTML / CSS onDecember 30, 2012

折纸效果是最近触摸屏幕最流行的一个3D效果,工作原理很简单,只需要轻轻触摸屏幕,它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用户们眼前一亮!在我们的网站上,曾经共享过几篇关于折叠效果的设计文章,有兴趣的朋友可以阅读一下。

今天我们带来了更多关于折叠特效的资源,可以帮助你方便的实现这些折叠效果。注意,这里都可以使用CSS 3D来进行效果变换,如缩放、倾斜、旋转等等。

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

CSS and Javascript Resources

Oridomi

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

这是一个独立的javascript插件,它们可以像纸一样生成折叠效果。此类库不依赖于任何其它JavaScript框架(但对于jQuery可以有选择性支持)并使用CSS 3D创建过渡效果。

3D Thumbnail Hover Effect

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

在Codrops这个教程中,让人印象最深刻的就是使用CSS来生成3D缩略图悬停效果。帮助你了解如何制作一款折叠的悬停效果,并提供了四种不同类型供大家选择。

Makisu

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

使jQuery插件生成一个CSS 3D菜单,可以帮助我们自动转换任何列表元素。非常棒一款的3D效果下拉式菜单,独有的滚动折叠效果能够让你的应用更富有吸引力。

Paper Like Unfolding Effect

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

在另一个Codrops教程中,一款不同的折纸教程将展示给大家。这是一个实验性的jQuery插件,它可以帮助你展开画面就像打开一本册子一样,在这里包含了很多内容,有兴趣的可以点击查看。


Paperfold CSS

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

这应该是最早的折叠效果案例,在这个插件中只需要一个DOM元素,将它分割成几个部分,再将它们重新组合,看上去就好像一个三维空间里的折叠效果一样。

Folding HTML View

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

一个超棒的折叠效果展示!

Pure CSS Folded Paper Effect

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

这不是javascript实现的折叠,也不是任何其它类型的特效,这里展示给我们的是如何让生成渐变背景而产生折叠视觉效果。再次提醒大家,以上生成的特效内容只在移动设备、Safari或者Chrome环境下支持。并且均不支持IE9浏览器。希望今天的内容可以带给你们更多的帮助,希望你们喜欢!

今天我们带来了更多关于折叠特效的资源,可以帮助你方便的实现这些折叠效果。注意,这里都可以使用CSS 3D来进行效果变换,如缩放、倾斜、旋转等等。

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

CSS and Javascript Resources

Oridomi

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

这是一个独立的javascript插件,它们可以像纸一样生成折叠效果。此类库不依赖于任何其它JavaScript框架(但对于jQuery可以有选择性支持)并使用CSS 3D创建过渡效果。

3D Thumbnail Hover Effect

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

在Codrops这个教程中,让人印象最深刻的就是使用CSS来生成3D缩略图悬停效果。帮助你了解如何制作一款折叠的悬停效果,并提供了四种不同类型供大家选择。

Makisu

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

使jQuery插件生成一个CSS 3D菜单,可以帮助我们自动转换任何列表元素。非常棒一款的3D效果下拉式菜单,独有的滚动折叠效果能够让你的应用更富有吸引力。

Paper Like Unfolding Effect

绝对令人的惊叹的CSS3折叠效果(3D效果)整理

在另一个Codrops教程中,一款不同的折纸教程将展示给大家。这是一个实验性的jQuery插件,它可以帮助你展开画面就像打开一本册子一样,在这里包含了很多内容,有兴趣的可以点击查看。

Paperfold CSS

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

这应该是最早的折叠效果案例,在这个插件中只需要一个DOM元素,将它分割成几个部分,再将它们重新组合,看上去就好像一个三维空间里的折叠效果一样。

Folding HTML View

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

一个超棒的折叠效果展示!

Pure CSS Folded Paper Effect

绝对令人的惊叹的CSS3折叠效果(3D效果)整理 

这不是javascript实现的折叠,也不是任何其它类型的特效,这里展示给我们的是如何让生成渐变背景而产生折叠视觉效果。再次提醒大家,以上生成的特效内容只在移动设备、Safari或者Chrome环境下支持。并且均不支持IE9浏览器。希望今天的内容可以带给你们更多的帮助,希望你们喜欢!

HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 #HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 #HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 #HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 #HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 #HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
You might like
php实现单链表的实例代码
2013/03/22 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python属于软件吗
2020/06/18 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
2015年试用期自我评价范文
2015/03/10 职场文书
七一活动主持词
2015/06/29 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏