需要帮助CSS3 3D变换

Question

请看这个页面：

http://www.abhi.my/lab/3D-menu.html

如果您还没有猜到，我正在尝试模拟新的iOS通知动画（这是我第一次看到它的地方），显然，我的两个微不足道的div并不像一个完整的盒子...... < / p>

知道我在这里做错了什么......？

这就是我想要接近的地方：http://www.youtube.com/watch?v=pBgVbzBJqDc

Answer 1

你只是在2d空间中转换你的元素，即使你想要3d效果。

一个工作实例：
http://jsfiddle.net/mrlundis/wU296/

“底部”跨度位于“前”跨度后面，使用translate3d(x,y,z) y和z对应于元素高度的一半（它围绕中心点旋转）。 ）使用-webkit-transform-origin应该可以达到相同的效果。

-webkit-transform-origin也用于确保包含div在悬停时围绕其中心点旋转。