为什么html中没有折叠效果,css3折叠效果

在开发过程中，经常会遇到一些交互效果，今天所联系的便是一个类似折纸的折叠效果，查看效果.

说到折纸，我们先看下图

这是我第一时间想到的大体思路，如果能让这6个面连续的变化角度到0不就可以了吗，运用css3 transition或animation毫无压力~~

要实现上图的这种效果，设置不同rotateX值及父元素的perspective即可，可是在实际写出来之后却发现这样并不可行，不论我们设置transform-origin或者其他的值，都不能使几个面相互一直相互连接。

再来看下图，我们折纸过程实际是这样子的，如果我们分解开来，可以分解成以下步骤，第一1,2,3在同一个平面，第二步：1为1个平面，2,3为1个平面，第三步：1,2,3分别成3个平面。我们可以这样认为，即2,3是以一定角度从1平面折叠，3是以一定角度从2平面折叠，所以我们修改下我们的html结构

段落1

段落2

段落3

css代码：

.outer{width:400px;margin:0px auto;-webkit-perspective:500px;-webkit-perspective-origin:% %

}

.outer .fold{height:100px;text-align:center;line-height:100px;font-family:'Microsoft YaHei';font-size: 24px;color:#fff;-webkit-transform-style:preserve-3d;

-webkit-transform-origin: }

.red{background-color:red;-webkit-transform:rotateX(50deg)}

.yellow{background-color:yellow;-webkit-transform:rotateX(-120deg)}

.blue{background-color:blue;-webkit-transform:rotateX(136deg)}

.green{background-color:green;-webkit-transform:rotateX(-120deg)}

我们得到的效果如下：

下面我们加上收缩动画，效果看这里：

代码如下：

css：

.outer{width:400px;margin:100px auto;

-webkit-perspective:800px;

-webkit-perspective-origin:% %

}

.outer .fold{height:100px;

text-align:center;

line-height:100px;

font-family:'Microsoft YaHei';

font-size: 24px;

color:#fff;

-webkit-transform-style:preserve-3d;

-webkit-transform-origin: ;

-webkit-transition:transform linear 800ms;

}

.red{background-color:red;

-webkit-transform:rotateX(90deg)

}

.yellow{background-color:yellow;

-webkit-transform:rotateX(-180deg)

}

.blue{background-color:blue;

-webkit-transform:rotateX(180deg);

}

.green{background-color:green;

-webkit-transform:rotateX(-180deg);

}

.outer.activity .fold{-webkit-transform:rotateX(0deg);

}

html：

段落1

段落2

段落3

js：

var btn=document.getElementById('btn'),

contain=document.querySelector('.outer')

;

btn.οnclick=function(){

contain.classList.toggle('activity')

}

当然，我们可以为不同的元素添加不同的transition-delay，来使几个面有先后的展开。

那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

jQuery文本段落展开和折叠效果

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

Hover.css：一组超实用的 CSS3 悬停效果和动画

Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

10个实用的 CSS3 按钮效果制作教程

人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

学习制作精美 CSS3 按钮效果的10个优秀教程

由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

Cool！15个创意的 CSS3 文本效果【下篇】

这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

随机推荐

Android-socket服务端断重启后，android客户端自动重连

今天研究这个问题搞了整整一天啊!终于出来了,不过我没有多大的成就感,为什么呢?因为这不是我的劳动成果.同样的问题,我却没想出来!心塞的很啊…… 不过还是要给大家分享一下,希望给大家带来帮助! 先声明一 ...

如何恢复SQL Server 中的Master库

如何恢复SQL Server 2005中的Master库 2011-05-10 16:34 Vegas Lee 博客园 我要评论(0) 字号:T | T   master库对于SQLServer来说, ...

SoDiaoEditor电子病历编辑器更新至V3版本，愿与各位一路同行！

简单闲聊两句-- 记得刚参加工作那会儿,去医院实施,信息科不远处就是手术室,门口每天都挤满了人,他们中大多数都是等待手术结果的患者家属,有的还会把折叠床带来,应该是陪床有段时间了.有时路过,还会听到一 ...

Oracle创建表空间、用户管理、角色管理

内容:Oracle创建表空间.用户管理.角色管理 1.用系统用户登录Oracle 默认的系统用户: sys/system.sysman.scott sys:权限最大,超级用户,可以完成所有任务, 默认 ...

C语言：使用结构体和指针函数实现面向对象思想(OO编程)

原文:https://www.linuxidc.com/Linux/2016-12/138789.htm 有关: 一.基础研究 观察如下两个程序a. ...

使用gulp和bable实现实时编译ES6代码

这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

LINUX系统一一CentOS6.5之tomcat安装

一 准备工作建立好文件夹 tomcat文件夹地址  二 下载并解压 当然是下载了 1.centos6.5系统里面下载 解压 2.本机下载 然后利用Xftp复制到目标文件加载解压(我用的是这种,随意啦) ...

CSS规范 - 优化方案--(来自网易)

值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...

前端提交表单两种验证方式记录 jq或h5 required属性

JQuery:

&l ...