Diretiva transform rotate quebrando transform scale on hover

Fala ai Saulo, tudo bem? O que é feito quando a diretiva transform é ativada? Alguma classe ou estilos são aplicados?

Fico no aguardo.

rotate 90deg

import Vue from 'vue';

Vue.directive('meu-transform', {
    bind(el, binding, vnode) {
        let current = 0;
        el.addEventListener('dblclick', function() {
            current += 90;
            el.style.transform = `rotate(${current}deg)`;
        });
    }
});

Fala ai Saulo, tudo bem? O problema é que o estilo definido inline no elemento com a propriedade style é mais prioritário do que o hover ou demais estilos informados no CSS.

Nesse caso, você pode tentar aplicar uma classe no seu elemento em vez de modificar o estilo diretamente nele:

el.classList.add(`rotate-${current}`)

E no seu CSS você ter as classes para os angulos de rotação:

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.rotate-360 {
    transform: rotate(360deg);
}

Espero ter ajudado.