需要关于CSS3 3D转换的帮助

Question

请查看此页面：

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

如果你还没有猜到，我试图模拟新的iOS通知动画（那是我第一次看到它的地方），显然，我的两个可怜的div不像一个完整的盒子... 你有什么想法我在这里做错了吗...？ 我想接近这个: http://www.youtube.com/watch?v=pBgVbzBJqDc

- Abhishek

---

哈哈...来吧，伙计们...12个浏览量，还没有答案？非常感谢点赞，但是没有建议，我怎么能把它做得更好呢？ - Abhishek

@BoldClock - 嘿，伙计，能告诉我你对我的帖子做了什么修改吗？ - Abhishek

这里的每个人都在免费帮助。 你需要耐心等待。 如果想查看所做的编辑，可以点击“已编辑”旁边的时间，以查看修订历史记录（在这种情况下，是重新标记）。 - Damien_The_Unbeliever

@Damien - 哈哈，别误会了伙计，我并不是想显得很急迫...但我的每一个问题都在两小时内得到了回答...如果我让大家觉得我是个彻头彻尾的蠢货，那我向全世界道歉... :-( - Abhishek

Answer 1

你只是在二维空间内变换元素，尽管你想要实现三维效果。

一个有效的例子：
http://jsfiddle.net/mrlundis/wU296/ 通过使用translate3d(x,y,z)将“底部”span放置在“前面”的span后面，其中y和z对应于元素高度的一半（它围绕其中心点旋转）。使用-webkit-transform-origin也应该能够实现同样的效果。 -webkit-transform-origin还用于确保包含div在hover时围绕其中心点旋转。

- mr_lundis

---

哦，-webkit-transform-origin中的15px是什么意思？我以为唯一被接受的值只有x和y？ - Abhishek

好的，完成了...我大致上得到了我想要的东西...在您的帮助下，我稍微更好地理解了情况，mr_lundis先生，您已经在演示中获得了相应的认可...您可以导航到OP中提供的链接进行查看... :-) - Abhishek

是的，没错 - 我将span放在我喜欢的位置，然后旋转容器。-webkit-transform-origin确实需要一个第三个参数来设置z的原点。请参阅Surfing Safari博客。我还注意到变换并不总是触发 - 不知道为什么。您可以尝试增加div的大小来进行补偿（即添加一些填充）。 - mr_lundis

通过创建并放置一个透明的div在导航元素下方来阻止任何悬停交互，修复了变换动画的情绪触发问题... 显然，导航的底部部分引起了尴尬，但已经尽力解决了... 请再次检查演示以查看其效果... P.S. 您有其他可以提供给我进行认证的来源吗？链接回您的SO个人资料有点枯燥... :-p - Abhishek

将链接返回到这里是可以的。另一个小提示：将盒子阴影移动到包含元素中，或者用一些渐变替换它，以获得更逼真的阴影，并防止它随着盒子移动，看起来相当尴尬。 - mr_lundis