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

时间:2014-05-17 11:27:33

标签: html css html5 css3 internet-explorer

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

我所拥有的示例是有限的,但它确实可以在FireFox中运行,而且没有其他浏览器可以在IE和Chrome中进行更好的测试。example

PS。粉红色的a:在元素需要转换到A标签底部的平面perpective表面之前,a:before标签应该向上动画以代替悬停的锚标签(我认为-90deg),当它为粉红色设置动画时显示的标签代替第一个标签

1 个答案:

答案 0 :(得分:0)

您应该发布代码而不是链接。但是,从您的codepen我可以告诉您不要使用供应商前缀来支持多个浏览器。

当您使用transitiontransform等时,您应该写

-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?