我不为什么，但是我应用于<a>标记的转换在Firefox中不起作用。可以在Chrome，Opera和Safari中正常使用。我在这样的wordpress网站上使用它
<a id="spinner" href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('name');?></a>
这是<div>和<a>的示例，在除firefox之外的其他浏览器中都可以正常工作。
http://jsfiddle.net/6HCRs/344/
这是我的代码
/* all other browsers */
@keyframes spinner {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#spinner:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
可转换元素是以下类别之一的元素：
- 一个元素，其布局由CSS框模型控制，该CSS框模型可以是块级或原子内联级元素，或者其display属性可以计算为table-row，table-row-group，table-header-group，table-footer -group，表单元格或表标题
- SVG命名空间中的元素，不受具有属性transform，“ patternTransform”或gradientTransform的CSS盒模型的控制。
跨浏览器存在一些不一致，但是为了使该transform属性对元素产生影响，该display属性不应为inline。
inline默认情况下，锚元素是必需的，因此您需要将更display改为inline-block或block使其在Firefox中运行。更改display属性的值以inline-block将元素呈现为原子内联级别的元素，因此，这些元素根据定义变为“可变形的”。
#spinner {
display: inline-block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句