透视起源 css 在 Firefox 30.0.1 中不起作用答案

【问题标题】：perspective-origin css not working in firefox 30.0.1透视起源 css 在 Firefox 30.0.1 中不起作用
【发布时间】：2015-08-16 03:14:24
【问题描述】：

我这里有一个 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;
}

现在所有这些似乎都可以在 google chrome 中运行，但在 Firefox 30.0.1 版中却不行。有人能帮帮我吗？如果时间允许，你能解释一下为什么它不起作用吗？谢谢

【问题讨论】：

标签： css firefox animation perspective

【解决方案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>

【讨论】：