模拟iPad应用上的twitter展现内容方式

twitter这款iPad上的应用在表现上做得十分让人欣喜，尤其是当两个手指在某条信息上向外展开时，就可以看到如图所示的效果，当时看到这个效果时，表示十分滴震惊，多么隐蔽的一个功能啊。

看到这么炫的表现，想到现在CSS3的动画以及3D表现，手痒啊，手痒。但在网页中我们是无法让鼠标做到同时相外伸展的效果，无非就是hover或者click之类的触发事件。既然如此，那就做一个鼠标hover到某个区域的时候，让隐藏的部分慢慢折叠展现出来。

先来看一下最终的表现效果，这个涉及到的是CSS3动画和3D表现，记得用webkit内核的浏览器打开，如果是其他内核浏览器，目前来说……你懂的。

>>demo<<

假如你没有webkit内核浏览器，那么就委屈一下。

代码部分很简单，看demo的源代码就明白了，大致是这样的几个思考点：

1. 折叠部分展开时的动画效果
2. 折叠的原点设置，能让折叠的部分可以通过z轴或者x轴之类的坐标进行倾斜以及旋转等效果
3. 设置hover的感应区域

扩展思考：可以考虑将展开的两个部分使用:after和:before两个伪元素来代替div标签使用。