CSS透视不适用于Firefox

这可能是任何人曾经问过的最简单的问题,但我的思绪今天早上一片空白.也许我需要更多咖啡.

基本上我正在尝试为元素添加一些CSS3转换效果,无论出于什么原因,Firefox都不会玩球.

如果你看一下Chrome中的this fiddle,你会看到我想要的东西,然后如果你在Firefox中看到它,你会发现它不一样……

这是该特定元素的CSS;

-webkit-transform: rotateY(60deg) scale(0.9);
-ms-transform: rotateY(60deg) scale(0.9);
transform: rotateY(60deg) scale(0.9);

我只是错过了一处房产吗?

解决方法

您将看到 Bug 716524 – ‘perspective’ only affects child nodes,not further descendants.该缺陷描述了Chrome和Firefox在解释继承方式方面存在差异.根据 perspective MDN文档,看起来它不应该被继承,但我有点同意Chrome,因为将它传播给后代是很直观的.

我尝试了从3D transformations with Firefox 10+开始的解决方法,建议重新应用transform-style:preserve-3d(有或没有-moz-取决于你关心支持哪些版本的Firefox)在每个深度,但这仍然不适合我.

将透视和透视原点移动到< ul>解决了Firefox中的问题.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效