我想做一个类似 http://huaban.com/pins/41377812 的3d折叠的名片，但是中间折叠的两个div一直有bug.
如果折叠上部分用的
transform-origin：top;-webkit-transform: rotateX(-90deg);，下部分是transform-origin：bottom;-webkit-transform: rotateX(90deg);，这样的话就会中间连不上，相反的话，外层x轴的宽度又会超出来，这块应该怎么写呢。
demo1: http://game.howlab.cn/card/index4.html
demo2: http://game.howlab.cn/card/index5.html
貌似我要同时改translateY，但是y的值我不知道应该怎么算，求解: )
3d折叠效果主要使用了景深perspective，translateZ，rotateX来实现的。
点击阅览
没有做兼容性处理，仅支持Chrome