Преобразование поворота CSS-преобразования не работает на элементах привязки в Firefox

Question

Я не понимаю, но преобразование, которое я применяю к тегу < a>, не работает в firefox. отлично работает в хроме, опера, т.е. сафари. Я использую его в моем WordPress сайте, как этот

<a id="spinner" href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('name');?></a> 

вот пример < div> и < а>, который отлично работает в других браузерах, чем 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; 
    } 

Answer 1

CSS Transforms Module Level 1 - Terminology - Transformable Element

трансформируемой элемент является элементом одной из следующих категорий:

• элемент с макета регулируют с помощью модели поля CSS, которая является либо block-level, либо atomic inline-level element, или чей display property вычисляет таблицу-таблицу, таблицу-строку-группу, таблицу-заголовок-группу, таблицу-нижний колонтитул, таблицу-таблицу или таблицу-заголовок
• элемент в пространстве имен SVG и не управляется моделью CSS-блока, которая имеет атрибуты transform, 'patternTransform' или gradientTransform.

Есть некоторые кросс-браузерные нестыковки, но для того, чтобы в transform собственности, чтобы иметь влияние на элемент, то display свойство не должно быть inline.

Анкерные элементы inline по умолчанию, поэтому вам нужно изменить display к inline-block или block для того, чтобы работать в Firefox. Изменение значения свойства display на inline-block отображает элементы как atomic inline-level elements, поэтому элементы становятся "transformable" по определению.

Updated Example

#spinner { 
    display: inline-block; 
} 

Answer 2

#spinner:hover { 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
    -moz-animation-play-state: paused; 

    }