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>

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

1 个答案: