Animation 需要CSS3 3D转换的帮助吗

请浏览本页：

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

知道我做错了什么吗

---

这就是我想要接近的：

您仅在2d空间中变换元素，即使您想要3d效果

工作示例：

使用

translate3d（x，y，z）

将“底部”跨距定位在“前部”跨距的后面，其中

y

和

z

对应于元素高度的一半（围绕其中心点旋转）。使用

-webkit transform origin

应该可以达到相同的效果

---

-webkit transform origin

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

哈哈。。。来吧，伙计们。。。12个观点却没有答案？我非常感谢诸如此类的评论，但没有任何关于如何改进的建议？@BoldClock-嘿，伙计，介意让我知道你对我的帖子做了哪些编辑吗？这里的每个人都免费提供帮助。你需要耐心。要查看所做的编辑，你可以点击“编辑”旁边的时间，查看修订历史（在本例中，这是一次重新标记）@Damien-Lol，别误会我，伙计，我不是想让人觉得我很急躁。。。但我问的每一个问题都在不到两个小时内得到了回答。。。如果我给人的印象是一个十足的蠢货，我向全世界道歉…：-（好的，你的例子很好，这就是我想要的一切……但是你能再解释一下吗？“‘底部’跨度被转换为假设立方体的底面。所以你基本上是在‘面’的位置烘焙，然后转换容器元素（有透视设置的那个？）还有，恕我直言，但在应用了这些转换之后，我注意到，当元素悬停时，偶尔会出现转换不触发的情况……这是一个技术限制，还是我们在实现中遗漏了什么？哦，那么-webkit转换源中的15px是什么呢？我认为唯一的acc接受的值是x&y？好的，完成了…我或多或少达到了我的目标…我对情况有点了解多谢你的帮助，lundis先生，你在演示中得到了相应的信任…你可以导航到OP中提供的链接查看…：-）是的，没错–我按照自己喜欢的方式定位跨距，然后旋转容器

-webkit transform origin

使用第三个参数设置z的原点。看。我还注意到转换并不总是触发——不知道为什么。如果要补偿的div（即添加som填充），可以尝试增加大小。通过在nav元素下方创建并放置透明div来阻止任何悬停交互，可以修复变换动画的温度触发。。。很明显，导航的底部造成了这种尴尬，但已尽我所能进行了补救。。。请再次检查演示以查看其效果。。。顺便问一下，你有没有其他我可以信任的来源？链接回您的SO个人资料有点枯燥…：-P