这里有高手实现了 css3 折叠动画,他是用 react 写的。

我用 html 实现的可以在线查看。

主要思路是： 由两个 div 分别显示图片的上下两部分，用背景样式显示图片。

上下两部分拼接成完整的图片，下半部使用 css 动画实现折叠。

折叠特效主要用到了以下几个特性:

• transform rotateX 沿 x 轴滚动
• perspective 透视，3d 视角的效果
• transform-origin滚动的原点
• transform-style:preserve-3d背部封皮的实现
• backface-visibility当元素的正面面向用户时，其背面是否可见，用于背部封皮的实现