css - perspective-origin css 在 firefox 30.0.1 中不起作用

Question

我这里有一个html div
<div id="div1">
<a href="<?=BASEURL;?>home/aboutus">
<div id="div2" align="center">T<br /> E<br /> S<br /> T<br /> I<br /> N<br /> G</div>
</a>
</div>

CSS 代码就在这里

#div1 {
position: relative;
margin: auto;
height: 250;
width: 200px;
padding: 10px;
/* Chrome, Safari, Opera */
-webkit-perspective: 125px;
-webkit-animation: mymove 2.5s infinite;
/* Standard syntax */
perspective: 125px;
animation: mymove 2.5s infinite;
right:0;
margin-right:-210px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {-webkit-perspective-origin: 10px 50%;}
}

/* Standard syntax */
@keyframes mymove {
50% {perspective-origin: 10px 50%;}
}

#div2 {
padding: 10px;
position: absolute;
background:linear-gradient(#333,#000,#000);
color:#effcd4;
-webkit-transform: rotateX(344deg); /* Chrome, Safari, Opera */
transform: rotateY(344deg);
border: 1px solid #d2ff30;
border-radius:1em;
}
#div2:hover{
-webkit-transform: rotateX(5deg); /* Chrome, Safari, Opera */
transform: rotateX(5deg);
color:#d2ff30;
}

现在所有这些似乎都适用于谷歌浏览器，但不适用于 firefox 30.0.1 版。有人能帮帮我吗？如果时间允许，您能解释一下为什么它不起作用吗？谢谢

Answer 1

好的，所以我找到了问题并修复了它，只是将其发布，以便它可以帮助将来遇到同样问题的人。

我有:

<div id="div1">
<a href="mysite.com/home/aboutus">
<div id="div2" align="center">T<br /> E<br /> S<br /> T<br /> I<br /> N<br /> G</div>
</a>
</div>

罪魁祸首是 <a href=""></a>标签

它应该像下面的代码。所以我们了解到带动画的 div 不应该放在链接标签内。干杯!

<div id="div1">
<div id="div2" align="center">T<br /> E<br /> S<br /> T<br /> I<br /> N<br /> G</div>
</div>