需要CSS3 3D转换的帮助

Please have a look at this page:

请看这一页:

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

If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...

如果你还没有猜到，我正在尝试模仿iOS的新通知动画(这是我第一次看到它的地方)，显然，我的两个小div不像一个完整的盒子……

Any idea what I'm doing wrong here...?

你知道我在这里做错了什么吗?

This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc

这就是我想要接近的内容:http://www.youtube.com/watch?

1 个解决方案

#1

You are only transforming you elements in 2d space, even though you are going for a 3d effect.

你只是在二维空间中改变你的元素，即使你想要一个三维效果。

A working example:
http://jsfiddle.net/mrlundis/wU296/

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

The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.

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

-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.

-webkit-transform-origin也被用来确保包含div在鼠标悬停时围绕它的中心点旋转。

#1