在 CSS3 3D 变换方面需要帮助答案

【问题标题】：Need help with CSS3 3D transforms在 CSS3 3D 变换方面需要帮助
【发布时间】：2011-07-13 17:50:57
【问题描述】：

请查看此页面：

如果您还没有猜到，我正在尝试模拟新的 iOS 通知动画（这是我第一次看到它的地方），显然，我的两个微不足道的 div 的行为不像一个完整的盒子......

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

【问题讨论】：

大声笑...来吧，伙计们... 12 次查看但没有答案？我非常感谢大家的赞，但没有关于如何使它变得更好的建议？
@BoldClock - 嘿伙计，介意告诉我你对我的帖子做了什么编辑吗？
这里的每个人都是免费的。你需要耐心等待。要查看进行了哪些编辑，您可以单击“已编辑”旁边的时间，查看修订历史记录（在这种情况下，它是重新标记）
@Damien - 大声笑，不要误会我的意思，伙计，我并没有试图给人一种咄咄逼人的印象......但我问过的所有其他问题都在不到 2 分钟内得到了回答小时...如果我遇到一个彻头彻尾的蠢货，向全世界道歉... :-(

【解决方案1】：

你只是在 2d 空间中变换你的元素，即使你想要一个 3d 效果。

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

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

【讨论】：

好的，你的例子很棒，这就是我要找的一切......但是你能解释一下吗......“底部”跨度被翻译成显示为假定的立方体。所以你基本上是在“面”的位置烘焙，然后变换容器元素（设置了透视图的那个？）另外，不要抱怨，但应用了这些变换，我注意到有当元素悬停时，变换偶尔不会触发......这是技术限制，还是我们在实现中遗漏了什么？
哦，-webkit-transform-origin 中的 15px 是什么？我认为唯一可接受的值是 x 和 y？
好的，完成...我或多或少地达到了我的目标...感谢您的帮助 mr_lundis，我对情况有了一些了解，并且您在演示中得到了相应的评价。 ..您可以导航到 OP 中提供的链接以查看... :-)
是的，没错——我按照自己喜欢的方式放置跨度，然后旋转容器。 -webkit-transform-origin 确实采用了第三个参数来设置 z 的原点。请参阅Surfing Safari blog。我还注意到转换并不总是触发——不知道为什么。如果 div 进行补偿（即添加 som 填充），您可以尝试增加大小。
通过在导航元素下方创建并放置一个透明 div 以阻止任何悬停交互，修复了变换动画的喜怒无常触发... 显然导航的底部导致了尴尬，但有已尽我所能进行补救...请再次检查演示以查看其效果...你有我可以信任的替代来源吗？链接回您的 SO 个人资料有点枯燥... :-p