Mouseover/парение ошибка с помощью Rotate (бесконечное вращение) в Firefox

Question

Я сталкивался с такой проблемой:

MouseOver на правой стороне, где слово heree есть, и вы получите бесконечное вращение (я использую Firefox).

Как это решить?

button{ 
 
    transition: 0.5s all; 
 
    transform:none; 
 
} 
 

 
button:hover{ 
 
    transform:rotateY(360deg) scale(1.4); 
 
    margin:5px; 
 
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

P.S. Если я удалю margin параметр, то он работает нормально. Но я тоже хочу маржу!

Answer 1

Я считаю, что это из-за all перехода.

Установить это только для transform, и я предполагаю, что проблема решена здесь- в Firefox может быть сочетание scaling и margin на hover кнопки вызывает проблему.

button{ 
 
    transition: 0.5s transform; 
 
    transform:none; 
 
} 
 

 
button:hover{ 
 
    transform:rotateY(360deg) scale(1.4); 
 
    margin:5px; 
 
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

Позвольте мне знать ваше мнение о this.Thanks!

Answer 2

Похоже, что ваш button:hover + margin переходит на 0.5s, а также преобразование. Вам просто нужно быть более конкретным с переходом: transition: 0.5s transform;

button{ 
 
    transition: 0.5s transform; 
 
    transform:none; 
 
} 
 

 
button:hover{ 
 
    transform:rotateY(360deg) scale(1.4); 
 
    margin:5px; 
 
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>