css3 rotateX效果的实践

Question

我想做一个类似 http://huaban.com/pins/41377812 的3d折叠的名片，但是中间折叠的两个div一直有bug.

1. 如果折叠上部分用的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的值我不知道应该怎么算，求解: )

Answer 1

3d折叠效果主要使用了景深perspective，translateZ，rotateX来实现的。

点击阅览

没有做兼容性处理，仅支持Chrome