浏览器 CSS 从立方体翻转垂直变换

Question

我需要一些有关 3d 转换的帮助。转换在 a:hover 事件上，并使用 a:hover 和 a:before 伪元素转换为垂直翻转，这就像一个 crad filp 但它从菜单的基线开始翻转，它应该看起来像一个向上翻转的立方体。这是代码codepen上的代码请尝试让它在Webkit和Mozilla，当然还有IE中工作，请看看你能做什么。

我的例子是有限的，但它确实在 FireFox 和其他浏览器中工作，所以最好先在 IE 和 chrome 中测试。example

附言。粉红色的 a:before 元素需要在 A 标签底部的平面透视表面上进行转换，并且 a:before 标签应该向上动画以代替悬停的锚标签（我认为是-90度），当它为粉红色设置动画时标签显示在第一个标签的位置

Answer 1

您应该发布代码而不是链接。但是，从您的代码笔中，我可以告诉您没有使用供应商前缀来支持多种浏览器。

当你使用transition、transform等时你应该写

-webkit-transition: all .3s;
-mos-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;

看到这个问题：Does Internet Explorer support CSS transitions?