Как решить проблему с CSS анимацией кнопки в Firefox?

Question

[Никита Листратов]

Добрый день.

Затык в следующем: есть кнопка. В webkit браузерах (Chrome, Yandex, Opera) кнопка крутится так, как надо. В Firefox - просто сжимается.

Причем на сайте примере кнопка крутится и в webkit и в Firefox.

Не могу понять - где ошибка? Может кто-то сталкивался уже.

Спасибо.

Comments

[Александр Лысенко]

Префиксы -moz- для css3 пробовали?

[Никита Листратов]

AlexanderZe: естественно :)

[Александр Лысенко]

Никита Листратов: Тогда смотрите вот в эту сторону, хотя, возможно, оно уже не актуально

[myaca]

autoprefixer.github.io/ru

Если не пробовал - попробуй.

[Антон Мудренок]

myaca: дело не в префиксах, а 3d контексте и особенностях рендера мозилы

Answer 1

[Антон Мудренок]

preserve-3d в мозиле багнутое

upd:
пока вы писали я правильную схему нарулил =)
https://codepen.io/just-a-training/pen/MowRJa?edit...
у контейнера перспектива, у линка preserve, дальше трансформы

В этой статье описана основная боль, надо бы мне еще раз ее прочесть (и вам тоже советую, это мало кто знает и понимает)

Comments

[Никита Листратов]

Обновил вопрос - на сайте примере крутится и там и там. Не могу выловить в чем разница...

[Антон Мудренок]

Никита Листратов: а можете вынести эту кнопку со стилями отдельно на codepen? Я давно как-то крутил эту тему, но надо вспомнить.

[Никита Листратов]

Антон Мудренок: пожалуйста https://codepen.io/nixonbest/pen/weabwa

[Антон Мудренок]

Никита Листратов: дополнил ответ, чекайте ссылку

[Никита Листратов]

Антон Мудренок: Антон, огромное спасибо! Помогло )