需要用CSS3 3D变换帮助

Question

请看看这个页面：

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

如果您还没有已经猜到了，我试图模仿新的iOS通知动画（这是我第一次看到它），显然，我的两个微型div不像一个满箱子...

任何想法我在做什么错在这里...？

这是我想什么亲近：http://www.youtube.com/watch?v=pBgVbzBJqDc

Answer 1

你只转化您在二维空间的元素，即使你要一个3D效果。

工作示例：
http://jsfiddle.net/mrlundis/wU296/

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

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