需要帮助CSS3 3D变换

时间:2011-07-12 07:04:29

标签: css animation css3 3d

请看这个页面:

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

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

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

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

1 个答案:

答案 0 :(得分:4)

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

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

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

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