请看这个页面:
http://www.abhi.my/lab/3D-menu.html
如果您还没有猜到,我正在尝试模拟新的iOS通知动画(这是我第一次看到它的地方),显然,我的两个微不足道的div并不像一个完整的盒子...... < / p>
知道我在这里做错了什么......?
这就是我想要接近的地方:http://www.youtube.com/watch?v=pBgVbzBJqDc
答案 0 :(得分:4)
你只是在2d空间中转换你的元素,即使你想要3d效果。
一个工作实例:
http://jsfiddle.net/mrlundis/wU296/
“底部”跨度位于“前”跨度后面,使用translate3d(x,y,z)
y
和z
对应于元素高度的一半(它围绕中心点旋转)。 )使用-webkit-transform-origin
应该可以达到相同的效果。
-webkit-transform-origin
也用于确保包含div在悬停时围绕其中心点旋转。